博客
关于我
2.2.1 绘制Canvas路径 - 绘制线条
阅读量:797 次
发布时间:2023-04-04

本文共 1392 字,大约阅读时间需要 4 分钟。

使用HTML5 Canvas绘制图形教程

使用HTML5 Canvas绘制图形教程

1. 绘制线条

const canvas = document.getElementById('myCanvas');

const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(400, 200);
ctx.strokeStyle = 'red';
ctx.stroke();

这段代码会在Canvas上绘制一条从左上角(0, 0)到右下角(400, 200)的红色直线。

2. 绘制具有不同结束线帽的线条

ctx.lineWidth = 10;

ctx.lineCap = "butt"; // 平直的线帽

ctx.moveTo(20, 20);
ctx.lineTo(380, 20);
ctx.strokeStyle = "red";
ctx.stroke();
ctx.lineCap = "round"; // 圆形的线帽
ctx.moveTo(20, 40);
ctx.lineTo(380, 40);
ctx.strokeStyle = "green";
ctx.stroke();
ctx.lineCap = "square"; // 方形的线帽
ctx.moveTo(20, 60);
ctx.lineTo(380, 60);
ctx.strokeStyle = "blue";
ctx.stroke();

这段代码绘制了三条具有不同线帽样式的线条,展示了如何在Canvas上控制线条的细节。

3. 绘制向阳花图形

const canvas = document.getElementById('myCanvas');

const ctx = canvas.getContext('2d');

ctx.fillStyle = "#eeeeef";
ctx.fillRect(0, 0, 300, 300);
var dx = 150;
var dy = 150;
var s = 100;
ctx.beginPath();
ctx.fillStyle = "rgb(255, 255, 0)";
ctx.strokeStyle = "rgb(0, 0, 100)";
var dig = Math.PI / 15 * 11;
for (var i = 0; i < 30; i++) {
var x = Math.sin(dig * i);
var y = Math.cos(dig * i);
ctx.lineTo(dx + x * s, dy + y * s);
}
ctx.closePath();
ctx.fill();
ctx.stroke();

这段代码首先绘制了一个淡灰色的背景,然后在中心绘制了一个向阳花图形。


总结与展望

通过以上示例,我们可以看到Canvas API的强大和灵活。无论是简单的线条还是复杂的图形,Canvas都能轻松应对。希望今天的分享能够帮助大家更好地理解和使用Canvas。

转载地址:http://wyrfk.baihongyu.com/

你可能感兴趣的文章
MySQL-连接
查看>>
mysql-递归查询(二)
查看>>
MySQL5.1安装
查看>>
mysql5.5和5.6版本间的坑
查看>>
mysql5.5最简安装教程
查看>>
mysql5.6 TIME,DATETIME,TIMESTAMP
查看>>
mysql5.6.21重置数据库的root密码
查看>>
Mysql5.6主从复制-基于binlog
查看>>
MySQL5.6忘记root密码(win平台)
查看>>
MySQL5.6的Linux安装shell脚本之二进制安装(一)
查看>>
MySQL5.6的zip包安装教程
查看>>
mysql5.7 for windows_MySQL 5.7 for Windows 解压缩版配置安装
查看>>
Webpack 基本环境搭建
查看>>
mysql5.7 安装版 表不能输入汉字解决方案
查看>>
MySQL5.7.18主从复制搭建(一主一从)
查看>>
MySQL5.7.19-win64安装启动
查看>>
mysql5.7.19安装图解_mysql5.7.19 winx64解压缩版安装配置教程
查看>>
MySQL5.7.37windows解压版的安装使用
查看>>
mysql5.7免费下载地址
查看>>
mysql5.7命令总结
查看>>