返回
Canvas 创作艺术杰作 - 手把手教你轻松绘制图形
前端
2023-10-30 15:51:43
踏入Canvas的图形世界：用代码挥洒创意
HTML5 Canvas 就像一张空白画布，等待着你的创意涂鸦。它是一种强大的绘图工具，能够在网页上创造生动活泼的图形。准备好化身艺术家，用纯原生 JavaScript 绘制出各种形状，让你的作品闪耀在数字舞台上吧！
绘制实心圆：让圆润成为你的画笔
-
准备画布：
- 想象 Canvas 就是你的画纸，使用
<canvas>元素创建它。 - 获得画布的上下文对象，它是你的画笔，用来在画布上挥洒创意。
- 想象 Canvas 就是你的画纸，使用
-
绘制实心圆：
- 用
beginPath()方法开启绘制路径，就像拿起画笔开始画画。 - 用
arc()方法画出实心圆，就像用圆规在画纸上勾勒圆形。 - 用
closePath()方法结束路径，让圆形完整呈现。 - 最后，用
fill()方法填充实心圆，让它呈现出你喜欢的颜色，就好像给你的作品涂上缤纷色彩。
- 用
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
绘制三角形：让锐利成为你的锋芒
-
勾画三角形：
- 用
beginPath()方法开启三角形路径，就像找到三角形的第一个角。 - 用
moveTo()方法移动到三角形的第一个顶点，然后用lineTo()方法连接到另外两个顶点，就像找到它的另外两个角。 - 用
closePath()方法闭合路径，让三角形完整呈现，就好像用直线将三个点连接起来。
- 用
-
填充三角形：
- 用
fill()方法填充三角形，就像给它涂上你喜欢的颜色，让它在画布上脱颖而出。
- 用
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.closePath();
ctx.fill();
绘制五边形：让多边形成为你的利器
-
描绘五边形：
- 用
beginPath()方法开启五边形路径，就像准备勾勒它的形状。 - 用
moveTo()方法找到五边形的第一个角，然后用lineTo()方法连接到另外四个角，就像在画纸上画出一个五角形。 - 用
closePath()方法闭合路径，让五边形完整呈现，就好像用五条直线围成一个图形。
- 用
-
填充五边形：
- 用
fill()方法填充五边形，就像给它涂上你喜欢的颜色，让它在画布上绽放异彩。
- 用
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.lineTo(x4, y4);
ctx.lineTo(x5, y5);
ctx.closePath();
ctx.fill();
绘制五角星：让星光成为你的灵感
-
勾勒五角星：
- 用
beginPath()方法开启五角星路径，就像勾勒出它的美丽轮廓。 - 用
moveTo()方法找到五角星的一个角，然后用lineTo()方法连接到另外四个角，就像在画纸上画出一个五角星。 - 用
closePath()方法闭合路径，让五角星完整呈现，就好像用五条直线勾勒出它的形状。
- 用
-
填充五角星：
- 用
fill()方法填充五角星，就像给它涂上闪亮的金色或你喜欢的任何颜色，让它在画布上熠熠生辉。
- 用
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);
ctx.lineTo(x4, y4);
ctx.lineTo(x5, y5);
ctx.closePath();
ctx.fill();
挥洒个性：让你的作品独一无二
-
调整位置：
- 用
translate()方法调整图形的位置，就像在画布上移动它们，找到最适合你的构图。
- 用
-
自定义颜色：
- 用
fillStyle属性设置填充颜色，就像给你的作品涂上你喜欢的色彩，让它们在画布上更加鲜艳。 - 用
strokeStyle属性设置边框颜色，就像给你的作品勾勒出想要的线条，让它们更加清晰。
- 用
ctx.fillStyle = "red";
ctx.strokeStyle = "blue";
探索更多可能性：让想象力飞扬
Canvas 的绘图功能远不止于此。它可以绘制出更复杂的图形，甚至动画。如果你有更多的想法，不要拘束，大胆尝试，让 Canvas 成为你创意的画笔，让你的作品在数字舞台上大放异彩。
常见问题解答
-
如何清除画布？
- 使用
clearRect()方法清除画布上所有内容，就像用橡皮擦擦掉画纸上的所有痕迹。
- 使用
-
如何保存画布？
- 使用
toDataURL()方法将画布的内容保存为图像文件，就像把你的作品封存在画框里。
- 使用
-
如何绘制渐变色？
- 使用
createLinearGradient()或createRadialGradient()方法创建渐变色，就像在画纸上晕染色彩。
- 使用
-
如何绘制阴影？
- 使用
shadowOffsetX、shadowOffsetY、shadowBlur和shadowColor属性为图形添加阴影，就像在画纸上营造立体感。
- 使用
-
如何绘制文本？
- 使用
fillText()或strokeText()方法绘制文本，就像在画纸上书写文字。
- 使用
