Canvas所有的属性和方法

Canvas 是 HTML5 中新增的标签，它允许开发者使用 JavaScript 在网页上绘制 2D 或 3D 图形。

以下是 Canvas 中常用的属性和方法：

属性

1. canvas.width 和 canvas.height
   这两个属性分别控制画布的宽度和高度，可以在绘制前进行设置，或者通过CSS样式表设置。

   // 创建一个宽度为200，高度为100的画布
   const canvas = document.createElement('canvas');
   canvas.width = 200;
   canvas.height = 100;
   

2. ctx.fillStyle 和 ctx.strokeStyle
   这两个属性分别控制填充颜色和描边颜色。可以设置成颜色值、渐变或者图案。默认情况下，填充颜色为黑色，描边颜色为透明。

   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   
   // 设置填充颜色
   ctx.fillStyle = 'red';
   ctx.fillRect(0, 0, canvas.width, canvas.height);
   
   // 设置描边颜色
   ctx.strokeStyle = 'blue';
   ctx.strokeRect(10, 10, canvas.width - 20, canvas.height - 20);
   

3. ctx.lineWidth 和 ctx.lineCap
   这两个属性分别用于设置线条的宽度和端点样式。lineWidth 接受一个数值，表示线条的宽度；lineCap 则接受三种值：butt、round 和 square，分别表示平头、圆头和方头的端点样式。

   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   
   // 设置线条宽度和端点样式
   ctx.lineWidth = 5;
   ctx.lineCap = 'round';
   
   // 绘制一条直线
   ctx.beginPath();
   ctx.moveTo(50, 50);
   ctx.lineTo(150, 50);
   ctx.stroke();
   

4. ctx.shadowColor、ctx.shadowOffsetX 和 ctx.shadowOffsetY
   这三个属性用于设置阴影的颜色、水平和垂直偏移量。可以让绘制的图形带有阴影效果。

   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   
   // 设置阴影颜色和偏移量
   ctx.shadowColor = 'black';
   ctx.shadowOffsetX = 5;
   ctx.shadowOffsetY = 5;
   
   // 绘制一个矩形，并带有阴影效果
   ctx.fillStyle = 'red';
   ctx.fillRect(50, 50, 100, 100);
   

5. ctx.globalAlpha
   这个属性用于设置绘制的图形的透明度，接受一个介于 0 到 1 之间的数值，表示不透明到完全透明的范围。

   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   
   // 设置透明度为 0.5，绘制一个半透明的矩形
   ctx.globalAlpha = 0.5;
   ctx.fillStyle = 'red';
   ctx.fillRect(50, 50, 100, 100);
   

6. toDataURL() 和 toBlob()

   var canvas = document.getElementById("myCanvas");
   var dataURL = canvas.toDataURL();
   console.log(dataURL);
   canvas.toBlob(function(blob) {
     var url = URL.createObjectURL(blob);
     console.log(url);
   });
   

   上述代码中，使用toDataURL()方法将canvas转换成base64编码的图片URL，并输出到控制台。使用toBlob()方法将canvas转换成Blob对象，并将其转换成URL，然后输出到控制台。

7. font 和 fillText()

   var canvas = document.getElementById("myCanvas");
   var ctx = canvas.getContext("2d");
   ctx.font = "30px Arial";
   ctx.fillText("Hello, world!", 50, 50);
   

   上述代码中，使用font属性设置字体样式，然后使用fillText()方法绘制文本。其中，第一个参数为要绘制的文本，第二个和第三个参数分别为文本的X轴和Y轴坐标。

8. textAlign 和 textBaseline

   var canvas = document.getElementById("myCanvas");
   var ctx = canvas.getContext("2d");
   ctx.font = "30px Arial";
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
   ctx.fillStyle = "red";
   ctx.fillText("Hello, world!", 100, 100);
   

   上述代码中，使用font属性设置字体样式，使用textAlign属性设置文本对齐方式为"center"，使用textBaseline属性设置文本基线对齐方式为"middle"，然后使用fillText()方法绘制文本，并将其放置在canvas元素的中心位置。

方法

1. canvas.getContext('2d')
   这个方法返回一个CanvasRenderingContext2D对象，用来进行2D图形绘制操作。它是Canvas API的核心对象，可以使用它来绘制直线、弧线、文本、图像等。

   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   

2. ctx.fillRect() 和 ctx.strokeRect()
   这两个方法分别用于填充矩形和描边矩形。需要传入四个参数：矩形左上角的x坐标、y坐标、宽度和高度。

   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   
   // 填充矩形
   ctx.fillStyle = 'red';
   ctx.fillRect(10, 10, 100, 50);
   
   // 描边矩形
   ctx.strokeStyle = 'blue';
   ctx.strokeRect(10, 10, 100, 50);
   

3. ctx.beginPath() 和 ctx.closePath()
   这两个方法分别用于开始一个新的路径和结束当前路径。路径可以包含直线、弧线、二次贝塞尔曲线、三次贝塞尔曲线等，可以通过这些路径绘制各种形状。

   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   
   // 绘制一个三角形
   ctx.beginPath();
   ctx.moveTo(50, 50);
   ctx.lineTo(100, 50);
   ctx.lineTo(75, 100);
   ctx.closePath();
   ctx.fill();
   

4. ctx.fillText() 和 ctx.strokeText()
   这两个方法分别用于绘制文本，可以传入文本内容、位置和样式等参数。ctx.fillText()方法会绘制填充文本，ctx.strokeText()方法会绘制描边文本。

   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   
   // 填充文本
   ctx.font = '20px Arial';
   ctx.fillStyle = 'red';
   ctx.fillText('Hello', 50, 50);
   
   // 描边文本
   ctx.font = 'bold 30px Arial';
   ctx.strokeStyle = 'blue';
   ctx.strokeText('World', 50, 100);
   

5. ctx.drawImage()
   这个方法用于绘制图像，可以传入图像对象、位置和大小等参数。可以用它来加载并显示图片，或者复制画布中的一部分到另一个位置。

   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   const img = new Image();
   img.src = 'image.jpg';
   img.onload = function() {
     ctx.drawImage(img, 0, 0);
   };
   

6. ctx.arc() 和 ctx.arcTo()
   这两个方法用于绘制圆形或圆弧线段，它们可以接受多个参数，包括圆心坐标、半径、起始弧度、终止弧度等。

   • arc(x, y, radius, startAngle, endAngle, anticlockwise)：以 (x, y) 为圆心，半径为 radius 的圆上，从 startAngle 弧度开始，到 endAngle 弧度结束，逆时针或顺时针（根据 anticlockwise 参数）绘制一段圆弧。

   • arcTo(x1, y1, x2, y2, radius)：从路径的当前点绘制一条切线，再连接到 (x2, y2) 点，以半径为 radius 的圆弧线段连接到 (x1, y1) 点。

   举例如下：

   const canvas = document.createElement('canvas');
   const ctx = canvas.getContext('2d');
   
   // 绘制一个圆形
   ctx.beginPath();
   ctx.arc(50, 50, 30, 0, Math.PI * 2);
   ctx.fill();
   
   // 绘制一个圆弧
   ctx.beginPath();
   ctx.arc(50, 50, 30, Math.PI / 4, Math.PI * 3 / 4);
   ctx.stroke();
   
   // 绘制一条弧线
   ctx.beginPath();
   ctx.moveTo(10, 10);
   ctx.arcTo(100, 10, 100, 100, 20);
   ctx.stroke();
   

   在上面的例子中，我们先绘制了一个圆形，然后用 arc() 方法绘制了一个圆弧，起始弧度为 π 4 \frac{\pi}{4} 4π，终止弧度为 3 π 4 \frac{3\pi}{4} 43π，并且用 stroke() 方法描边。

   最后，我们用 arcTo() 方法绘制了一条从当前点 (10, 10) 到点 (100, 10) 的切线，再连接到点 (100, 100)，以半径为 20 的圆弧线段连接到点 (10, 10)。

结语

以上是一些常用的Canvas属性，它们可以用来控制绘制的图形的样式、颜色和透明度等。需要注意的是，Canvas的属性和方法非常丰富，我们只能列举其中的一部分。如果想要深入了解和学习Canvas，建议查阅相关文档或教程。

这篇好文章是转载于：编程之路