Canvas基础，24个知识点你掌握了吗？_行业百科

1. Canvas是HTML5提供的一个用于图形绘制的二维绘图上下文。，2. 通过JavaScript，可以在Canvas上绘制各种图形和动画。，3. 创建Canvas元素时，需要设置宽度和高度。，4. 使用getContext('2d')获取2D绘图上下文。，5. 常用绘图方法包括fillRect(), strokeRect(), clearRect()等。，6. 路径绘制方法有beginPath(), moveTo(), lineTo(), arc(), bezierCurveTo()等。，7. 填充和描边路径的方法分别是fill()和stroke()。，8. 变换画布坐标系的方法有translate(), rotate(), scale()。，9. 保存和恢复画布状态的方法是save()和restore()。，10. globalAlpha和globalCompositeOperation控制透明度和合成模式。，11. 使用drawImage()方法绘制图像或画布。，12. 文本绘制方法包括fillText()和strokeText()。，13. 阴影效果可以通过shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY实现。，14. 线性渐变和径向渐变分别通过createLinearGradient()和createRadialGradient()实现。，15. 图案填充可以使用createPattern()方法。

Canvas基础知识小结

HTML5的元素提供了一种在网页上绘制图形的方式，它通过JavaScript API来动态渲染图像和动画，以下是24个关于Canvas的基础知识小结：

1、创建Canvas元素

2、获取Canvas上下文

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d');

3、绘制矩形

 context.fillRect(50, 50, 100, 100);

4、绘制路径

 context.beginPath(); context.arc(75, 75, 50, 0, Math.PI * 2, true); context.stroke();

5、填充文本

 context.font = '30px Arial'; context.fillText('Hello World', 10, 50);

6、清除画布

 context.clearRect(0, 0, canvas.width, canvas.height);

7、设置颜色

 context.fillStyle = '#FF0000';

8、渐变填充

 var gradient = context.createLinearGradient(0, 0, 200, 0); gradient.addColorStop(0, 'red'); gradient.addColorStop(1, 'blue'); context.fillStyle = gradient; context.fillRect(0, 0, 200, 100);

9、图案填充

 var pattern = context.createPattern(image, 'repeat'); context.fillStyle = pattern; context.fillRect(0, 0, 200, 200);

10、变换坐标系

 context.translate(100, 100); context.rotate((Math.PI / 180) * 45); context.scale(1, 2);

11、裁剪区域

 context.beginPath(); context.rect(50, 50, 100, 100); context.clip();

12、合成操作

 context.globalCompositeOperation = 'sourceover';

13、阴影效果

 context.shadowColor = 'gray'; context.shadowBlur = 10; context.shadowOffsetX = 10; context.shadowOffsetY = 10;

14、图像数据

 var imageData = context.getImageData(0, 0, canvas.width, canvas.height); context.putImageData(imageData, 0, 0);

15、像素操作

 var data = imageData.data; for (var i = 0; i < data.length; i += 4) { data[i] = 255 data[i]; // invert red channel }

16、绘制图片

 var image = new Image(); image.onload = function() { context.drawImage(image, 0, 0); }; image.src = 'image.png';

17、缩放图片

 context.drawImage(image, 0, 0, image.width, image.height, 50, 50, 100, 100);

18、切片图片

 context.drawImage(image, 0, 0, 50, 50, 0, 0, 50, 50);

19、旋转图片

 context.save(); context.translate(canvas.width / 2, canvas.height / 2); context.rotate((Math.PI / 180) * 45); context.drawImage(image, image.width / 2, image.height / 2); context.restore();

20、透明度