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

最新推荐文章于 2022-09-13 16:23:20 发布

liupengs

最新推荐文章于 2022-09-13 16:23:20 发布

阅读量775

点赞数

分类专栏： HTML5 javascript 文章标签： ARC Arc arc bezierCurveTo canvas Canvas quadraticCurveTo 绘图

本文链接：https://blog.csdn.net/liu1013714929/article/details/8457394

版权

javascript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML5

3 篇文章 0 订阅

订阅专栏

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