1. 引言canvas是 HTML5 中引入的一个强大元素它提供了一个可以通过 JavaScript 脚本绘制图形的“画布”。与使用 DOM 或 CSS 创建图形不同canvas提供了一套底层的、基于像素的 2D 绘图 API让你能够动态生成图表、游戏画面、图像处理、动画等丰富内容。本文将带你从零开始掌握canvas的核心概念与实战技巧。2. 什么是canvascanvas元素本身只是一个透明的矩形区域它不具备任何绘图能力。真正的绘图工作是通过 JavaScript 获取其“渲染上下文”Rendering Context来完成的。最常用的是2d上下文它提供了绘制形状、文本、图像和处理像素的方法。2.1 基本结构在 HTML 中插入一个canvas元素非常简单canvasidmyCanvaswidth400height300您的浏览器不支持 Canvas 元素。/canvasid用于在 JavaScript 中定位元素。width和height定义画布的尺寸像素。注意通过 CSS 设置宽高会拉伸画布而不会改变其实际分辨率。标签内的文本当浏览器不支持canvas时显示的回退内容。2.2 获取渲染上下文要开始绘图首先需要获取渲染上下文constcanvasdocument.getElementById(myCanvas);constctxcanvas.getContext(2d);ctx对象就是你的“画笔”所有绘图方法都挂载在这个对象上。3. 核心绘图 API3.1 绘制矩形矩形是canvas中唯一可以直接绘制的形状。其他形状如圆形、多边形需要通过路径Path来绘制。// 绘制一个填充的矩形ctx.fillStylelightblue;ctx.fillRect(10,10,150,100);// (x, y, width, height)// 绘制一个边框矩形ctx.strokeStylered;ctx.lineWidth3;ctx.strokeRect(200,10,150,100);// 清除一个矩形区域使其变透明ctx.clearRect(50,50,80,60);3.2 绘制路径Path路径是绘制复杂图形的基础。基本步骤是beginPath()- 定义路径 -closePath()可选 -fill()或stroke()。// 绘制一个圆形ctx.beginPath();ctx.arc(200,200,50,0,Math.PI*2);// (x, y, 半径, 起始角度, 结束角度)ctx.fillStylegreen;ctx.fill();// 绘制一个三角形ctx.beginPath();ctx.moveTo(300,300);// 移动到起点ctx.lineTo(350,250);// 画线到第二个点ctx.lineTo(400,300);// 画线到第三个点ctx.closePath();// 闭合路径回到起点ctx.strokeStyleblue;ctx.lineWidth2;ctx.stroke();3.3 样式与颜色fillStyle设置填充颜色支持颜色名、十六进制、RGB、RGBA、渐变、图案。strokeStyle设置描边颜色。lineWidth设置线条宽度。globalAlpha设置全局透明度0.0 到 1.0。// 使用半透明颜色ctx.fillStylergba(255, 0, 0, 0.5);ctx.fillRect(50,50,100,100);3.4 绘制文本ctx.font30px Arial;ctx.fillStyleblack;ctx.fillText(Hello Canvas!,50,150);// 填充文本ctx.strokeStylered;ctx.strokeText(Hello Canvas!,50,200);// 描边文本3.5 绘制图像可以将已有的img、video或其他canvas元素绘制到画布上。constimgnewImage();img.onloadfunction(){ctx.drawImage(img,0,0,200,150);// (图像, x, y, 宽, 高)};img.srcexample.png;注意图像加载是异步的必须在onload回调中绘制。4. 实战绘制一个简单的柱状图下面我们综合运用所学知识绘制一个简单的柱状图。!DOCTYPEhtmlhtmlheadtitleCanvas 柱状图/title/headbodycanvasidchartCanvaswidth500height300/canvasscriptconstcanvasdocument.getElementById(chartCanvas);constctxcanvas.getContext(2d);constdata[120,200,150,80,70,110];constbarWidth60;constgap20;conststartX40;constchartHeight250;// 绘制背景ctx.fillStyle#f0f0f0;ctx.fillRect(0,0,canvas.width,canvas.height);// 绘制柱子data.forEach((value,index){constbarHeight(value/Math.max(...data))*chartHeight;constxstartXindex*(barWidthgap);constycanvas.height-30-barHeight;ctx.fillStylesteelblue;ctx.fillRect(x,y,barWidth,barHeight);// 在柱子上方显示数值ctx.fillStyleblack;ctx.font14px Arial;ctx.textAligncenter;ctx.fillText(value,xbarWidth/2,y-5);});/script/body/html5. 动画与性能优化5.1 创建动画循环使用requestAnimationFrame创建流畅的动画。functiondraw(){// 清除画布ctx.clearRect(0,0,canvas.width,canvas.height);// ... 绘制当前帧的内容 ...// 请求下一帧requestAnimationFrame(draw);}// 启动动画requestAnimationFrame(draw);5.2 性能优化建议避免频繁重绘只在需要时更新画布。分层 Canvas将静态背景和动态元素放在不同的canvas上只重绘动态层。离屏渲染先在内存中的canvas上绘制复杂图形再一次性drawImage到主画布。减少状态变更频繁修改fillStyle、strokeStyle等属性会消耗性能尽量批量绘制相同样式的图形。6. 总结canvas元素为 Web 开发打开了图形和动画的大门。通过 JavaScript 的 2D 上下文你可以实现从简单的图表到复杂的游戏引擎。掌握路径、样式、图像处理和动画循环是进阶的关键。希望本文能帮助你迈出 Canvas 编程的第一步在实际项目中创造出令人惊叹的视觉效果。
HTML 的 ＜canvas＞ 元素
1. 引言canvas是 HTML5 中引入的一个强大元素它提供了一个可以通过 JavaScript 脚本绘制图形的“画布”。与使用 DOM 或 CSS 创建图形不同canvas提供了一套底层的、基于像素的 2D 绘图 API让你能够动态生成图表、游戏画面、图像处理、动画等丰富内容。本文将带你从零开始掌握canvas的核心概念与实战技巧。2. 什么是canvascanvas元素本身只是一个透明的矩形区域它不具备任何绘图能力。真正的绘图工作是通过 JavaScript 获取其“渲染上下文”Rendering Context来完成的。最常用的是2d上下文它提供了绘制形状、文本、图像和处理像素的方法。2.1 基本结构在 HTML 中插入一个canvas元素非常简单canvasidmyCanvaswidth400height300您的浏览器不支持 Canvas 元素。/canvasid用于在 JavaScript 中定位元素。width和height定义画布的尺寸像素。注意通过 CSS 设置宽高会拉伸画布而不会改变其实际分辨率。标签内的文本当浏览器不支持canvas时显示的回退内容。2.2 获取渲染上下文要开始绘图首先需要获取渲染上下文constcanvasdocument.getElementById(myCanvas);constctxcanvas.getContext(2d);ctx对象就是你的“画笔”所有绘图方法都挂载在这个对象上。3. 核心绘图 API3.1 绘制矩形矩形是canvas中唯一可以直接绘制的形状。其他形状如圆形、多边形需要通过路径Path来绘制。// 绘制一个填充的矩形ctx.fillStylelightblue;ctx.fillRect(10,10,150,100);// (x, y, width, height)// 绘制一个边框矩形ctx.strokeStylered;ctx.lineWidth3;ctx.strokeRect(200,10,150,100);// 清除一个矩形区域使其变透明ctx.clearRect(50,50,80,60);3.2 绘制路径Path路径是绘制复杂图形的基础。基本步骤是beginPath()- 定义路径 -closePath()可选 -fill()或stroke()。// 绘制一个圆形ctx.beginPath();ctx.arc(200,200,50,0,Math.PI*2);// (x, y, 半径, 起始角度, 结束角度)ctx.fillStylegreen;ctx.fill();// 绘制一个三角形ctx.beginPath();ctx.moveTo(300,300);// 移动到起点ctx.lineTo(350,250);// 画线到第二个点ctx.lineTo(400,300);// 画线到第三个点ctx.closePath();// 闭合路径回到起点ctx.strokeStyleblue;ctx.lineWidth2;ctx.stroke();3.3 样式与颜色fillStyle设置填充颜色支持颜色名、十六进制、RGB、RGBA、渐变、图案。strokeStyle设置描边颜色。lineWidth设置线条宽度。globalAlpha设置全局透明度0.0 到 1.0。// 使用半透明颜色ctx.fillStylergba(255, 0, 0, 0.5);ctx.fillRect(50,50,100,100);3.4 绘制文本ctx.font30px Arial;ctx.fillStyleblack;ctx.fillText(Hello Canvas!,50,150);// 填充文本ctx.strokeStylered;ctx.strokeText(Hello Canvas!,50,200);// 描边文本3.5 绘制图像可以将已有的img、video或其他canvas元素绘制到画布上。constimgnewImage();img.onloadfunction(){ctx.drawImage(img,0,0,200,150);// (图像, x, y, 宽, 高)};img.srcexample.png;注意图像加载是异步的必须在onload回调中绘制。4. 实战绘制一个简单的柱状图下面我们综合运用所学知识绘制一个简单的柱状图。!DOCTYPEhtmlhtmlheadtitleCanvas 柱状图/title/headbodycanvasidchartCanvaswidth500height300/canvasscriptconstcanvasdocument.getElementById(chartCanvas);constctxcanvas.getContext(2d);constdata[120,200,150,80,70,110];constbarWidth60;constgap20;conststartX40;constchartHeight250;// 绘制背景ctx.fillStyle#f0f0f0;ctx.fillRect(0,0,canvas.width,canvas.height);// 绘制柱子data.forEach((value,index){constbarHeight(value/Math.max(...data))*chartHeight;constxstartXindex*(barWidthgap);constycanvas.height-30-barHeight;ctx.fillStylesteelblue;ctx.fillRect(x,y,barWidth,barHeight);// 在柱子上方显示数值ctx.fillStyleblack;ctx.font14px Arial;ctx.textAligncenter;ctx.fillText(value,xbarWidth/2,y-5);});/script/body/html5. 动画与性能优化5.1 创建动画循环使用requestAnimationFrame创建流畅的动画。functiondraw(){// 清除画布ctx.clearRect(0,0,canvas.width,canvas.height);// ... 绘制当前帧的内容 ...// 请求下一帧requestAnimationFrame(draw);}// 启动动画requestAnimationFrame(draw);5.2 性能优化建议避免频繁重绘只在需要时更新画布。分层 Canvas将静态背景和动态元素放在不同的canvas上只重绘动态层。离屏渲染先在内存中的canvas上绘制复杂图形再一次性drawImage到主画布。减少状态变更频繁修改fillStyle、strokeStyle等属性会消耗性能尽量批量绘制相同样式的图形。6. 总结canvas元素为 Web 开发打开了图形和动画的大门。通过 JavaScript 的 2D 上下文你可以实现从简单的图表到复杂的游戏引擎。掌握路径、样式、图像处理和动画循环是进阶的关键。希望本文能帮助你迈出 Canvas 编程的第一步在实际项目中创造出令人惊叹的视觉效果。
