博客
关于我
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 Innodb 锁机制
查看>>
MySQL InnoDB中意向锁的作用及原理探
查看>>
MySQL InnoDB事务隔离级别与锁机制深入解析
查看>>
Mysql InnoDB存储引擎 —— 数据页
查看>>
Mysql InnoDB存储引擎中的checkpoint技术
查看>>
Mysql InnoDB存储引擎中缓冲池Buffer Pool、Redo Log、Bin Log、Undo Log、Channge Buffer
查看>>
MySQL InnoDB引擎的锁机制详解
查看>>
Mysql INNODB引擎行锁的3种算法 Record Lock Next-Key Lock Grap Lock
查看>>
mysql InnoDB数据存储引擎 的B+树索引原理
查看>>
mysql interval显示条件值_MySQL INTERVAL关键字可以使用哪些不同的单位值?
查看>>
mysql problems
查看>>
MySQL replace函数替换字符串语句的用法(mysql字符串替换)
查看>>
mysql workbench6.3.5_MySQL Workbench
查看>>
MySQL Workbench安装教程以及菜单汉化
查看>>
MySQL Xtrabackup 安装、备份、恢复
查看>>
mysql [Err] 1436 - Thread stack overrun: 129464 bytes used of a 286720 byte stack, and 160000 bytes
查看>>
MySQL _ MySQL常用操作
查看>>
MySQL – 导出数据成csv
查看>>
MySQL —— 在CentOS9下安装MySQL
查看>>
mysql 不区分大小写
查看>>