HTML5 Canvas

HTML5 <canvas> 元素

HTML5 引入了 <canvas> 元素,使得在网页中绘制图形变得更加容易。通过 <canvas>,你可以动态地绘制图像、图表、动画和其他图形内容。它提供了一个固定大小的区域,你可以使用 JavaScript 访问并绘制。


1. 基本语法

arduino 复制代码
<canvas id="myCanvas" width="500" height="400">
  您的浏览器不支持Canvas元素。
</canvas>
php
77 Bytes
© 菜鸟-创作你的创作
  • id :指定 <canvas> 元素的唯一标识符。
  • width:指定画布的宽度,默认值为 300px。
  • height:指定画布的高度,默认值为 150px。

如果浏览器不支持 <canvas> 元素,<canvas> 标签中的文本内容会显示出来。


2. 获取 2D 绘图上下文

绘制图形需要通过 JavaScript 获取到画布的绘图上下文。常见的上下文类型是 2DWebGL 。下面是获取 2D上下文的代码:

ini 复制代码
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
</script>
php
107 Bytes
© 菜鸟-创作你的创作
  • getContext("2d"):用于获取 2D 渲染上下文,它提供了绘制图形的多种方法。
  • getContext("webgl"):用于获取 WebGL 渲染上下文,支持 3D 图形绘制。

3. 绘制基本形状

通过 2D 上下文,你可以绘制各种基本形状,如矩形、圆形、线条、文本等。

1. 绘制矩形

ini 复制代码
// 绘制填充矩形
ctx.fillStyle = "blue";  // 设置填充颜色
ctx.fillRect(50, 50, 150, 100);  // 参数:x, y, width, height
// 绘制空心矩形
ctx.strokeStyle = "red";  // 设置边框颜色
ctx.strokeRect(250, 50, 150, 100);  // 参数:x, y, width, height
// 清空矩形区域
ctx.clearRect(100, 100, 50, 50);  // 参数:x, y, width, height
php
283 Bytes
© 菜鸟-创作你的创作

2. 绘制圆形

ini 复制代码
// 绘制填充圆形
ctx.beginPath();  // 开始路径
ctx.arc(200, 200, 50, 0, 2 * Math.PI);  // 参数:圆心x, 圆心y, 半径, 起始角度, 结束角度
ctx.fillStyle = "green";
ctx.fill();  // 填充圆形
// 绘制空心圆形
ctx.beginPath();
ctx.arc(400, 200, 50, 0, 2 * Math.PI);
ctx.strokeStyle = "purple";
ctx.stroke();  // 绘制圆形的边框
php
273 Bytes
© 菜鸟-创作你的创作

3. 绘制直线

ini 复制代码
// 绘制直线
ctx.beginPath();
ctx.moveTo(50, 300);  // 起始点
ctx.lineTo(450, 300);  // 结束点
ctx.strokeStyle = "orange";
ctx.stroke();  // 绘制路径
php
134 Bytes
© 菜鸟-创作你的创作

4. 绘制文字

ini 复制代码
// 绘制文本
ctx.font = "30px Arial";  // 设置字体大小和字体
ctx.fillStyle = "black";  // 设置文本颜色
ctx.fillText("Hello, Canvas!", 100, 100);  // 参数:文本, x, y
php
140 Bytes
© 菜鸟-创作你的创作

4. 渐变和阴影

1. 线性渐变

ini 复制代码
// 创建线性渐变
var grd = ctx.createLinearGradient(0, 0, canvas.width, 0);  // 创建一个从左到右的渐变
grd.addColorStop(0, "red");  // 渐变起始颜色
grd.addColorStop(1, "blue");  // 渐变结束颜色
// 使用渐变填充矩形
ctx.fillStyle = grd;
ctx.fillRect(50, 150, 400, 100);
php
230 Bytes
© 菜鸟-创作你的创作

2. 径向渐变

ini 复制代码
// 创建径向渐变
var grd = ctx.createRadialGradient(300, 200, 50, 300, 200, 200);  // 创建一个从圆心扩展的渐变
grd.addColorStop(0, "yellow");
grd.addColorStop(1, "green");
// 使用渐变填充圆形
ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(300, 200, 150, 0, 2 * Math.PI);
ctx.fill();
php
255 Bytes
© 菜鸟-创作你的创作

3. 添加阴影

ini 复制代码
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";  // 设置阴影颜色
ctx.shadowBlur = 10;  // 设置阴影的模糊程度
ctx.shadowOffsetX = 5;  // 设置阴影在X轴的偏移
ctx.shadowOffsetY = 5;  // 设置阴影在Y轴的偏移
// 绘制带阴影的矩形
ctx.fillStyle = "orange";
ctx.fillRect(50, 50, 150, 100);
php
232 Bytes
© 菜鸟-创作你的创作

5. 路径和贝塞尔曲线

1. 绘制路径

scss 复制代码
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 150);
ctx.lineTo(250, 50);
ctx.closePath();
ctx.stroke();  // 绘制路径
php
119 Bytes
© 菜鸟-创作你的创作

2. 贝塞尔曲线

scss 复制代码
// 绘制二次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(50, 200);  // 起始点
ctx.quadraticCurveTo(200, 100, 400, 200);  // 控制点和结束点
ctx.stroke();
// 绘制三次贝塞尔曲线
ctx.beginPath();
ctx.moveTo(50, 250);
ctx.bezierCurveTo(150, 150, 250, 350, 350, 250);  // 控制点和结束点
ctx.stroke();
php
253 Bytes
© 菜鸟-创作你的创作

6. 动画效果

通过 requestAnimationFrame() 方法,可以实现更平滑的动画效果。下面是一个简单的动画示例:

ini 复制代码
var x = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // 清空画布
  ctx.fillStyle = "red";
  ctx.beginPath();
  ctx.arc(x, 200, 50, 0, 2 * Math.PI);
  ctx.fill();
  x += 2;  // 更新x坐标
  if (x > canvas.width) x = 0;  // 重置x坐标
  requestAnimationFrame(animate);  // 请求下一帧
}
animate();  // 启动动画
php
317 Bytes
© 菜鸟-创作你的创作

7. 导出和导入图像

1. 导出 Canvas 内容为图片

ini 复制代码
var dataURL = canvas.toDataURL();  // 将canvas内容导出为图片的Data URL
console.log(dataURL);  // 打印出Base64编码的图片数据
php
104 Bytes
© 菜鸟-创作你的创作

2. 导入图片到 Canvas

ini 复制代码
var img = new Image();
img.onload = function() {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);  // 将图片绘制到canvas上
};
img.src = "image.jpg";  // 设置图片路径
php
160 Bytes
© 菜鸟-创作你的创作

总结

HTML5 <canvas> 元素是一个强大的工具,允许你在网页上绘制图形、制作动画和图表。它的用途非常广泛,涵盖了游戏开发、数据可视化、图像处理等领域。通过配合 JavaScript,你可以轻松地创建交互性强、动态的网页内容。 www.52runoob.com/archives/50...

相关推荐
JuneXcy13 分钟前
11.Layout-Pinia优化重复请求
前端·javascript·css
子洋23 分钟前
快速目录跳转工具 zoxide 使用指南
前端·后端·shell
天下无贼!24 分钟前
【自制组件库】从零到一实现属于自己的 Vue3 组件库!!!
前端·javascript·vue.js·ui·架构·scss
CF14年老兵1 小时前
✅ Next.js 渲染速查表
前端·react.js·next.js
司宸1 小时前
学习笔记八 —— 虚拟DOM diff算法 fiber原理
前端
阳树阳树1 小时前
JSON.parse 与 JSON.stringify 可能引发的问题
前端
让辣条自由翱翔1 小时前
总结一下Vue的组件通信
前端
dyb1 小时前
开箱即用的Next.js SSR企业级开发模板
前端·react.js·next.js
前端的日常1 小时前
Vite 如何处理静态资源?
前端
前端的日常1 小时前
如何在 Vite 中配置路由?
前端