博客
关于我
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之2003-Can‘t connect to MySQL server on ‘localhost‘(10038)的解决办法
查看>>
MySQL之CRUD
查看>>
MySQL之DML
查看>>
Mysql之IN 和 Exists 用法
查看>>
MYSQL之REPLACE INTO和INSERT … ON DUPLICATE KEY UPDATE用法
查看>>
MySQL之SQL语句优化步骤
查看>>
MYSQL之union和order by分析([Err] 1221 - Incorrect usage of UNION and ORDER BY)
查看>>
Mysql之主从复制
查看>>