Canvas学习笔记二——图形绘制

来源：互联网发布：php无限极分类菜单编辑：程序博客网时间：2024/04/28 20:37

1.矩形：

fillRect(x,y,width,height) :画一个被填满颜色的矩形

strokeRect(x,y,width,height) : 画一个矩形边框

clearRect(x,y,width,height) : 清理出一个矩形区域

三个函数的参数都是表示矩形的左上角位于( x , y ) ,宽为width，高为height.

    <!DOCTYPE html>    <html>    <body>    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">    Your browser does not support the HTML5 canvas tag.    </canvas>    <script>    var c=document.getElementById("myCanvas"),        ctx=c.getContext("2d");    ctx.fillRect(25,25,100,100);    ctx.clearRect(45,45,60,60);    ctx.strokeRect(50,50,50,50);    </script>    </body>    </html>

2.线段：

        ctx.beginPath();ctx.lineWidth="5";ctx.strokeStyle="red"; // 红色路径ctx.moveTo(0,75);ctx.lineTo(250,75);ctx.stroke(); // 进行绘制

1.用beginPath创建路径，如：ctx.beginPath();

2.实际绘图。

3. closePath关闭路径。

4.调用 stroke 或 fill 方法把图形绘制到 canvas 上去。stroke 是绘制图形的边框，fill 会用填充出一个实心图形。

注意：当调用 fill 时，开放的路径会自动闭合，而无须调用 closePath 。

例子：

    <!DOCTYPE html>    <html>    <body>   <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">   Your browser does not support the HTML5 canvas tag.   </canvas>   <script>    var c=document.getElementById("myCanvas"),    ctx=c.getContext("2d");    ctx.beginPath();    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle    ctx.moveTo(110,75);    ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)    ctx.moveTo(65,65);    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye    ctx.moveTo(95,65);    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye    ctx.stroke();    ctx.beginPath();    ctx.moveTo(40,75);    ctx.lineTo(60,65);    ctx.lineTo(90,65);    ctx.moveTo(110,75);    ctx.lineTo(125,75);    ctx.stroke();   </script>   </body>   </html>

3.绘制弧线：

arc(x, y, radius, startAngle, endAngle, anticlockwise)：

x,y圆心，radius为半径，startAngle起始弧度，endAngle结束弧度，如anticlockwise为true表示逆时针，反之须时针。

注意：弧度是以弧度为单位而不是以角度为单位。

度和弧度直接的转换可以用这个表达式：var radians = (Math.PI/180)*degrees;。

例子：

   <!DOCTYPE html>    <html>    <body>    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">       Your browser does not support the HTML5 canvas tag.    < /canvas>   <script>    var c=document.getElementById("myCanvas"),        ctx=c.getContext("2d");      ctx.beginPath();    var x              = 150;    var y              = 150;    var radius         = 100;    var startAngle     = Math.PI;    var endAngle       = 0.5*Math.PI;    var anticlockwise  =false;    ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);    ctx.stroke();  </script>   </body>  </html>

4.贝塞尔曲线：

quadraticCurveTo(cpX, cpY, x, y)：

quadraticCurveTo() 方法为当前的子路径添加一条贝塞尔曲线。这条曲线从当前点开始，到 (x,y) 结束。控制点 (cpX,cpY) 说明了这两个点之间的曲线的形状。

例子：

<!DOCTYPE html><html><body><canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>var c=document.getElementById("myCanvas"),    ctx=c.getContext("2d");                           ctx.beginPath();ctx.moveTo(75,25);ctx.quadraticCurveTo(25,25,25,62.5);ctx.quadraticCurveTo(25,100,50,100);ctx.quadraticCurveTo(50,120,30,125);ctx.quadraticCurveTo(60,120,65,100);ctx.quadraticCurveTo(125,100,125,62.5);ctx.quadraticCurveTo(125,25,75,25);    ctx.stroke();</script></body></html>

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)：

bezierCurveTo() 为一个画布的当前子路径添加一条三次贝塞尔曲线。这条曲线的开始点是画布的当前点，而结束点是 (x, y)。两条贝塞尔曲线控制点 (cpX1, cpY1) 和 (cpX2, cpY2) 定义了曲线的形状。当这个方法返回的时候，当前的位置为 (x, y)。

例子：

  <!DOCTYPE html>  <html>  <body>   <canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">     Your browser does not support the HTML5 canvas tag.   </canvas>   <script>var c=document.getElementById("myCanvas"),    ctx=c.getContext("2d");                           ctx.beginPath();ctx.moveTo(75,40);ctx.bezierCurveTo(75,37,70,25,50,25);ctx.bezierCurveTo(20,25,20,62.5,20,62.5);ctx.bezierCurveTo(20,80,40,102,75,120);ctx.bezierCurveTo(110,102,130,80,130,62.5);ctx.bezierCurveTo(130,62.5,130,25,100,25);ctx.bezierCurveTo(85,25,75,37,75,40);                ctx.stroke();   </script>  </body>  </html>

5.综合例子：

<!DOCTYPE html><html><body><canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><script>    var c=document.getElementById("myCanvas"),ctx=c.getContext("2d");               function draw() {  roundedRect(ctx,12,12,150,150,15);  roundedRect(ctx,19,19,150,150,9);  roundedRect(ctx,53,53,49,33,10);  roundedRect(ctx,53,119,49,16,6);  roundedRect(ctx,135,53,49,33,10);  roundedRect(ctx,135,119,25,49,10);  ctx.beginPath();  ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);  ctx.lineTo(31,37);  ctx.fill();  for(i=0;i<8;i++){    ctx.fillRect(51+i*16,35,4,4);  }  for(i=0;i<6;i++){    ctx.fillRect(115,51+i*16,4,4);  }  for(i=0;i<8;i++){    ctx.fillRect(51+i*16,99,4,4);  }  ctx.beginPath();  ctx.moveTo(83,116);  ctx.lineTo(83,102);  ctx.bezierCurveTo(83,94,89,88,97,88);  ctx.bezierCurveTo(105,88,111,94,111,102);  ctx.lineTo(111,116);  ctx.lineTo(106.333,111.333);  ctx.lineTo(101.666,116);  ctx.lineTo(97,111.333);  ctx.lineTo(92.333,116);  ctx.lineTo(87.666,111.333);  ctx.lineTo(83,116);  ctx.fill();  ctx.fillStyle = "white";  ctx.beginPath();  ctx.moveTo(91,96);  ctx.bezierCurveTo(88,96,87,99,87,101);  ctx.bezierCurveTo(87,103,88,106,91,106);  ctx.bezierCurveTo(94,106,95,103,95,101);  ctx.bezierCurveTo(95,99,94,96,91,96);  ctx.moveTo(103,96);  ctx.bezierCurveTo(100,96,99,99,99,101);  ctx.bezierCurveTo(99,103,100,106,103,106);  ctx.bezierCurveTo(106,106,107,103,107,101);  ctx.bezierCurveTo(107,99,106,96,103,96);  ctx.fill();  ctx.fillStyle = "black";  ctx.beginPath();  ctx.arc(101,102,2,0,Math.PI*2,true);  ctx.fill();  ctx.beginPath();  ctx.arc(89,102,2,0,Math.PI*2,true);  ctx.fill();    }    function roundedRect(ctx,x,y,width,height,radius){  ctx.beginPath();  ctx.moveTo(x,y+radius);  ctx.lineTo(x,y+height-radius);  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);  ctx.lineTo(x+width-radius,y+height);  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);  ctx.lineTo(x+width,y+radius);  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);  ctx.lineTo(x+radius,y);  ctx.quadraticCurveTo(x,y,x,y+radius);  ctx.stroke();   }   draw();</script></body></html>

参考于：https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial