Xiaoqiang's HTML5 mobile development path (6) -- Canvas graphic rendering Basics

As mentioned above, Canvas is an important feature of HTML5. canvas is very powerful, and the effects that can be achieved using photoshop can also be achieved using canvas. Below we use canvas to draw basic images.

I. Use of Canvas labels

You can see that the Canvas is like a Canvas. We can draw the image we need on this Canvas. The canvas element itself has no plotting capability. All the painting work must be completed inside JavaScript.

2. Draw a rectangle

<喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHByZSBjbGFzcz0 = "brush: java;"> <Script type = "text/javascript"> var c = document. getElementById ('1'); var p = c. getContext ("2d"); // getContext ("2d") is a built-in HTML5 object. It has multiple ways to draw paths, rectangles, circles, characters, and add images. P. fillStyle = "# FF0000"; p. fillRect (0, 0,300,300); p. fillStyle = "rgba (0,0, 255, 0.5)"; p. fillRect (200,200,500,500); </script>

3. draw lines

   
   
   <script type="text/javascript">var c=document.getElementById('1');var p=c.getContext("2d");p.moveTo(10,10);p.lineTo(150,50);p.lineTo(10,50);p.stroke(); </script>

4. Draw a circle

   
     
    <script type="text/javascript">var c=document.getElementById('1');var p=c.getContext("2d");p.fillStyle="#FF0000";p.beginPath();p.arc(80,80,15,0,Math.PI*2,true);p.closePath();p.fill(); </script>

5. Gradient

   
     
    <script type="text/javascript">var c=document.getElementById("1");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50); </script>

6. Draw Images

 
  Your browser does not support the canvas element.
 <script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image()img.src="/i/eg_flower.png"cxt.drawImage(img,0,0);</script>

7. Polygon

   
     
    <script type="text/javascript">var c=document.getElementById('1');var p=c.getContext("2d");p.fillStyle="#FF0000";p.moveTo(10,10);p.lineTo(150,50);p.lineTo(10,50);p.lineTo(20,30);p.fill(); </script>