这次给大家带来如何使用canvas来制作好用的涂鸦画板，使用canvas来制作好用的涂鸦画板的注意事项有哪些，下面就是实战案例，一起来看一下。在canvas中获取光标坐标
获取坐标的代码很简单:
注意:因为鼠标与触摸屏的事件是不一样的,鼠标只要悬浮与canvas上就可以获取到了,而触摸屏是需要按下的,并且所返回的 Event 对象也是不一样的。
2.控制是否绘制
控制是否绘制其实很简单,就是在不同事件时判断自定义变量drawing的值来控制
3.线条绘制
线条绘制的代码也是很简单的
....//线条绘制function drawLine(x0, y0, x1, y1, color, width) {
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.strokeStyle = color;
context.lineWidth = width;
context.stroke();
context.closePath();
}
....将绘制线条代码整合到事件中:
Document
4.绘制线条优化
当绘制线条宽度比较小的时候还好,一旦比较粗就会有写问题:
这时只要稍微改一下绘制的代码就行了
....//线条绘制function drawLine(x0, y0, x1, y1, color, width) {
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.strokeStyle = color;
context.lineWidth = width;
//-----加入-----
context.lineCap = "round";
context.lineJoin = "round"; //-----加入-----
context.stroke();
context.closePath();
}
....相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
