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、透明度