博客
关于我
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 数据类型和属性
查看>>
mysql 敲错命令 想取消怎么办?
查看>>
Mysql 整形列的字节与存储范围
查看>>
mysql 断电数据损坏,无法启动
查看>>
MySQL 日期时间类型的选择
查看>>
Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
查看>>
MySQL 是如何加锁的?
查看>>
MySQL 是怎样运行的 - InnoDB数据页结构
查看>>
mysql 更新子表_mysql 在update中实现子查询的方式
查看>>
MySQL 有什么优点?
查看>>
mysql 权限整理记录
查看>>
mysql 权限登录问题:ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using password: YES)
查看>>
MYSQL 查看最大连接数和修改最大连接数
查看>>
MySQL 查看有哪些表
查看>>
mysql 查看锁_阿里/美团/字节面试官必问的Mysql锁机制,你真的明白吗
查看>>
MySql 查询以逗号分隔的字符串的方法(正则)
查看>>
MySQL 查询优化:提速查询效率的13大秘籍(避免使用SELECT 、分页查询的优化、合理使用连接、子查询的优化)(上)
查看>>
mysql 查询,正数降序排序,负数升序排序
查看>>
MySQL 树形结构 根据指定节点 获取其下属的所有子节点(包含路径上的枝干节点和叶子节点)...
查看>>