canvas能画的图案有哪些-猿码集

1. canvas能画的图案简介

Canvas是HTML5新增的功能，它是一个用于制作图形化、动态图像的HTML标签。Canvas可用于绘制2D和3D图像，不同于SVG采用矢量图形渲染，Canvas采用的是光栅化渲染方式。这样就可以让开发者自由绘制图案，打造个性化的网站或应用。

Canvas不仅可以绘制出简单的矩形、圆形等基础图形，还可以通过合理的编程实现更为复杂的个性化元素。以下将介绍一些Canvas能够绘制的图案。

2. 绘制基础图形

2.1 绘制矩形

绘制矩形是Canvas最基础、最简单的操作之一，我们可以通过canvas的JavaScript API将一个矩形画到画布上。我们可以指定矩形的宽度、高度、X和Y坐标等属性，如下：

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);

上面的代码通过getContext方法获取到Canvas的绘图上下文，接着就可以使用fillRect方法画出一个红色的正方形。

2.2 绘制圆形

绘制圆形同样可以使用canvas的API，我们可以通过arc()方法绘制一个圆形。arc()方法需要传入6个参数，分别是圆心的X坐标、圆心的Y坐标、圆的半径、起始角度、结束角度和是否逆时针绘制圆形，代码如下：

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
ctx.fillStyle = '#FF0000';
ctx.fill();

代码中的beginPath()相当于开启一次新的路径，arc()方法是绘制圆形的关键，最后fill()将圆形填充为红色。

2.3 绘制直线

绘制直线可以通过canvas的API的一些方法完成，如moveTo()和lineTo()方法。moveTo()方法用于给线条定义一个起始点，lineTo()方法则是定义线条的结束点。代码如下：

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 100);
ctx.strokeStyle = '#FF0000';
ctx.stroke();

上述代码将绘制一条从(10,10)到(100,100)的直线。通过设置strokeStyle属性，可以设置线条的颜色。

3. 绘制复杂图案

3.1 绘制文本

在Canvas上还可以绘制图案，可以使用API，显示SVG地图或网络数据，绘制出更为复杂的元素。另外，我们还可以使用Canvas绘制文本。Canvas可以绘制任意样式的文本，我们可以设置字体、颜色、对齐方式等。代码如下：

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
ctx.font = "30px Arial";
ctx.fillStyle = "blue";
ctx.textAlign = "center";
ctx.fillText("Hello World", canvas.width / 2, canvas.height / 2);

用上述代码就可以在Canvas上绘制出一串文字，效果如下：

![canvas绘制文本](https://i.loli.net/2021/07/09/gitK8NuhnT9qCze.png)

3.2 绘制图片

Canvas不仅可以绘制出基本图形和文本，还可以在Canvas中显示图片。通过API可以获取、加载图片并展示出来，代码如下：

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
let img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}
img.src = 'image.jpg';

上述代码可以在Canvas上显示一张图片，同样效果图如下：

![canvas绘制图片](https://i.loli.net/2021/07/09/qAtZfkc7vSLO5MR.png)

3.3 绘制动画

Canvas还可以绘制动态图像，比如：动画。通过Canvas绘制动画的方法比较常见就是我们通过window.requestAnimationFrame方法，来不停地执行绘制操作，从而形成动画效果。代码如下：

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');
let x = 100;
let y = 100;
let vx = 2;
let vy = 1;
function draw() {
    requestAnimationFrame(draw);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(x, y, 50, 0, Math.PI * 2);
    ctx.fillStyle = '#FF0000';
    ctx.fill();
    x += vx;
    y += vy;
    if (x + 50 > canvas.width || x - 50 < 0) {
        vx = -vx;
    }
    if (y + 50 > canvas.height || y - 50 < 0) {
        vy = -vy;
    }
}
draw();

上述代码中绘制了一个红色的圆形，圆形会在画布中移动，并且碰到画布的边缘时会反弹。效果如下：

![canvas绘制动画](https://i.loli.net/2021/07/09/2p6IJMVGNt7bSLi.png)

4. 总结

通过以上代码示例，可以看出Canvas能够非常灵活地绘制出各种图案。总体上，Canvas可以绘制出各种基础形状，还可以绘制文本和图片。除此之外，Canvas还可以通过编写代码实现更为复杂的动画效果，为网页或移动端应用添加更多元素和趣味性。

canvas能画的图案有哪些