Canvas基础，24个知识点你掌握了吗？

2024年10月15日 互联网
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的<canvas>元素提供了一种在网页上绘制图形的方式，它通过JavaScript API来动态渲染图像和动画，以下是24个关于Canvas的基础知识小结：

1、创建Canvas元素

Canvas基础，24个知识点你掌握了吗？

   <canvas id="myCanvas" width="500" height="500"></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、透明度

    context.globalAlpha = 0.5;

21、线条宽度

    context.lineWidth = 10;

22、线条样式

    context.setLineDash([5, 15]);

23、线条连接

    context.lineJoin = 'round';

24、线条结束

    context.lineCap = 'square';
最新文章