HTML5的学习之canvas画布
上篇博客主要讲解了canvas线条有关的一些属性和方法。这篇文章我们继续学习canvas有关图形绘制的方法。
1.矩形
| 方法 | 描述 |
| rect() | 创建矩形。 |
| fillRect() | 绘制"被填充"的矩形。 |
| strokeRect() | 绘制矩形（无填充）。 |
| clearRect() | 在给定的矩形内清除指定的像素。 |
2.圆形
| 方法 | 描述 |
| arc() | 创建弧/曲线（用于创建圆形或部分圆）。 |
| arcTo() | 创建两切线之间的弧/曲线。 |
| ellipse() | 创建椭圆。 |
3.路径
| 方法 | 描述 |
| fill() | 填充当前绘图（路径）。 |
| stroke() | 绘制已定义的路径。 |
| beginPath() | 起始一条路径，或重置当前路径。 |
| moveTo() | 把路径移动到画布中的指定点，不创建线条。 |
| closePath() | 创建从当前点回到起始点的路径。 |
| lineTo() | 添加一个新点，然后在画布中创建从该点到最后指定点的线条。 |
| clip() | 从原始画布剪切任意形状和尺寸的区域。 |
| isPointInPath() | 如果指定的点位于当前路径中，则返回 true，否则返回 false。 |
| quadraticCurveTo() | 创建二次贝塞尔曲线。 |
| bezierCurveTo() | 创建三次贝塞尔曲线。 |
路径HTML代码：
<canvasid="my_canvas"></canvas>
路径JavaScript代码：
// 03canvas画布的路径// 1.获取元素varoCanvas=document.getElementById("my_canvas"); // 2.设置画布大小oCanvas.width="1000"; oCanvas.height="1000"; // 3.获取 画布环境varmyCanvas=oCanvas.getContext("2d"); // 4.绘图// fill() 填充当前绘图（路径）。// myCanvas.fillStyle="skyblue";// myCanvas.rect(0, 0, 200, 200);// myCanvas.fill();// stroke() 绘制已定义的路径。// myCanvas.strokeStyle="yellow";// myCanvas.rect(0, 0, 200, 200);// myCanvas.stroke();// beginPath() 起始一条路径，或重置当前路径。myCanvas.beginPath();//开始 路径myCanvas.lineWidth="10"; myCanvas.strokeStyle="yellow"; // moveTo() 把路径移动到画布中的指定点，不创建线条。myCanvas.moveTo(0,50); // lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条。myCanvas.lineTo(200,200); myCanvas.lineJoin="miter";//尖角myCanvas.lineJoin="round";//圆角myCanvas.lineJoin="bevel";;//斜角myCanvas.lineTo(300,100); myCanvas.lineTo(400,500); myCanvas.lineTo(100,400); myCanvas.closePath(); myCanvas.stroke(); // closePath() 创建从当前点回到起始点的路径。
圆形HTML代码：
<canvasid="my_canvas"></canvas>
圆形JavaScript代码：
// 1.获取元素varoCanvas=document.getElementById("my_canvas"); // 2.设置画布大小oCanvas.width="1000"; oCanvas.height="1000"; // 3.获取 画布环境varmyCanvas=oCanvas.getContext("2d"); // 4.绘图// beginPath() 起始一条路径，或重置当前路径// myCanvas.beginPath();//路径开始// // arc(x,y,r,起始角,结束角,false顺/true逆) 创建弧/曲线（用于创建圆形或部分圆）。// myCanvas.lineWidth="10"; // // myCanvas.strokeStyle="yellow";// myCanvas.fillStyle="yellow";// myCanvas.arc(500,500,200,0,Math.PI/2,true);// myCanvas.closePath();// // myCanvas.stroke();// myCanvas.fill();// arcTo(x1,y1,x2,y2,r) 创建两切线之间的弧/曲线。myCanvas.beginPath(); myCanvas.moveTo(50,50); myCanvas.lineTo(200,50); myCanvas.arcTo(300,50,300,150,100); myCanvas.lineTo(300,300); myCanvas.stroke();
