一，基础
假设html为
<style>
#canvas {
background-color: #444;
}
</style>
<body>
<canvas id="canvas"></canvas>
</body>
下面的例子都是基于这个的
1，设置画布宽高
画布默认的宽高为300 * 150，我们可以用html，和js的方式来设置宽高
不要用css，因为它不会想你想的那样
使用html
<canvas width='200' height='200' id="canvas"></canvas>
使用js
let canvas = document.getElementById('canvas');
canvas.width = 200;
canvas.height = 200;
2，绘制
这个步骤，其实在和使用PS的路径工具是同个道理，步骤：
- 拿到工具
- 绘制路径
- 设置填充或者描边
- 绘制完成
下面直接看个例子：
// 设置画板
let canvas = document.getElementById('canvas');
canvas.width = 400;
canvas.height = 400;
// 拿到工具
context = canvas.getContext('2d');
// 绘制路径
context.beginPath();
context.arc(200, 200, 50, 0, Math.PI * 2, true);
context.closePath();
// 设置填充
context.fillStyle = 'white';
context.fill();
// 设置描边
context.s
最低0.47元/天 解锁文章
1657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
