知识问答
如何通过HTML5 Canvas教程案例来学习绘图技巧？
HTML5 Canvas 画图教程案例分析
HTML5 Canvas 是一种强大的工具，用于在网页上绘制图形，它通过 JavaScript 控制绘图操作，因此需要一定的 JavaScript 基础，本文将详细分析 HTML5 Canvas 的工作原理、常用方法以及具体案例，帮助读者全面掌握这一技术。
Canvas 基本概念
1、Canvas 元素：HTML5 中的<canvas> 标签定义了一个矩形区域，用户可以在其上绘制图形。
<canvas id="cvs" width="800" height="600">你的浏览器不支持 canvas</canvas>
2、获取 Canvas 对象：通过 JavaScript 获取 Canvas 元素，并创建绘图上下文：
var cvs = document.getElementById('cvs'); var ctx = cvs.getContext('2d');3、坐标系统：Canvas 使用笛卡尔坐标系，原点在左上角，x 轴向右为正，y 轴向下为正。
常用绘图方法
1、绘制矩形：
fillRect(x, y, width, height)：填充矩形。
strokeRect(x, y, width, height)：绘制矩形边框。
ctx.fillStyle = 'blue'; ctx.fillRect(20, 20, 150, 100);
2、绘制路径：
beginPath()：开始一条新路径。
moveTo(x, y)：设置路径起点。
lineTo(x, y)：添加子路径。
closePath()：闭合路径。
ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(200, 75); ctx.quadraticCurveTo(200, 25, 150, 50); ctx.stroke();
3、绘制圆弧：
arc(x, y, radius, startAngle, endAngle, anticlockwise)：绘制圆弧。
ctx.beginPath(); ctx.arc(95, 50, 40, 0, 2 * Math.PI); ctx.stroke();
4、绘制图像：
drawImage(image, x, y)：在指定位置绘制图像。
drawImage(image, x, y, width, height)：缩放图像。
var img = new Image(); img.src = 'image.png'; img.onload = function() { ctx.drawImage(img, 0, 0); };案例分析：绘制灯笼
以下是一个简单的绘制灯笼的案例，展示了如何使用上述方法绘制复杂图形：
// 绘制椭圆function ParamEllipse(context, x, y, a, b) { var step = (a > b) ? 1 / a : 1 / b; context.fillStyle = "#ff0000"; context.beginPath(); context.moveTo(x + a, y); for (var i = 0; i < 2 * Math.PI; i += step) { context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i)); } context.closePath(); context.stroke(); context.fill();}// 绘制矩形function FillRect(context, x, y, w, h, flag) { var grd = context.createLinearGradient(x+w/2, y, x + w/2, y + h); if (flag) { grd.addColorStop(0, "yellow"); grd.addColorStop(1, "red"); } else { grd.addColorStop(0, "red"); grd.addColorStop(1, "yellow"); } context.fillStyle = grd; context.fillRect(x, y, w, h);}// 绘制线条function SetLine(ctx, x, y, x1, y1) { ctx.beginPath(); ctx.strokeStyle = "yellow"; ctx.moveTo(x, y); ctx.lineTo(x1, y1); ctx.stroke(); ctx.closePath();}window.onload = function() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var startX = 150; //中心坐标x var startY = 300; //中心坐标y var pWidth = 120; //椭圆长轴 var pHeigth = 80; //椭圆形短轴 var fWidth = 120; //矩形宽 var fheight = 40; //矩形高 //绘制椭圆 ParamEllipse(ctx, startX, startY, pWidth, pHeigth); //绘制上下两个矩形，并使它们与椭圆重叠一部分 FillRect(ctx, startX fWidth / 2, startY pHeigth (fheight / 2), fWidth, fheight, true); FillRect(ctx, startX fWidth / 2, startY + pHeigth (fheight / 2), fWidth, fheight, false); //在下方绘制线条 var lLen = fheight; //画线的范围始终在矩形之下 var lInterval = 8; //线与线之间的间隔 for (var i = 0; i < (fWidth / 8) + 1; i++) { SetLine(ctx, startX fWidth / 2 + i * lInterval, startY + pHeigth + fheight / 2, startX fWidth / 2 + i * lInterval, startY + pHeigth + fheight / 2 + lLen); }}常见问题解答（FAQs）
1、Canvas 的宽高如何设置？：可以通过 CSS 和 JavaScript 两种方式设置，但建议使用 JavaScript 直接设置宽高以避免不必要的缩放问题。
canvas.width = 400; canvas.height = 300;
2、如何清除画布内容？：可以使用clearRect() 方法清除指定区域的像素。
ctx.clearRect(0, 0, canvas.width, canvas.height);
3、如何实现动画效果？：可以通过不断重绘来实现动画效果，使用requestAnimationFrame() 来定时更新画布内容。
function drawAnimation() { // 清除画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 重新绘制内容 // ... // 请求下一帧动画 requestAnimationFrame(drawAnimation); } drawAnimation();
