效果预览图
源码：https://github.com/JianQiang-Ye/my-canvas
预览连接：https://jianqiang-ye.github.io/my-canvas/
尽力了
知识点总结
- 画笔从画下到松开需要三个鼠标事件
onmouseup、onmousemove、onmousedown - 关键部分的代码
//画一个圆
function drawCircle(x, y, radius) {
context.beginPath();
context.fillStyle = 'black' //填充颜色
context.arc(x, y, radius, 0, Math.PI * 2) //横坐标,纵坐标,半径,初始度数,终点度数
context.fill() //填充
context.closePath()
}
// 画一条线
function drawLine(x1, y1, x2, y2) {
context.beginPath()
context.lineWidth = 5 //线的宽度
context.moveTo(x1, y1) // 起点
context.lineTo(x2, y2) // 终点
context.stroke() //画线
context.closePath()
}
//橡皮擦
context.clearRect(x - 5, y - 5, 10, 10)// 注意橡皮擦是矩形,起点是从矩形的左上角开始
如果仅仅是画圆是不够的，会出现断断续续的情况，还需要把圆之间用线连起来，把圆连起来的思路是将上一次监听的点的坐标记录下来，然后将这个点和下一次监听到的坐标连接起来，最后把新监听到的点更新。
关于对象复制，学到对象的引用。
//1.现在有两个对象
var a = {'x':1};
var b = {'x':2}
//2.将b复制给a
a = b;
//3.如果此时改变b的属性,那么a的属性值也会跟着改变.例如:
b.x = 5;
a.x //此时输出结果是5
// 但是,如果换另一种方式改变b的属性
b = {'x': 6}
a.x //此时输出结果还是5
- 更新窗口高度
window.onresize = function () {
setCanvasSize();
}
- 获取页面高度
var pageHeigh = document.documentElement.clientHeight
var pageWidth = document.documentElement.clientWidth
- 改变canvas的宽高不能用css中的height、width，要改变其标签属性
- 切换橡皮擦和画笔按钮时，最好不要共用一个，一个button只做一件事情
eraser.onclick = function (e) {
usingEraser = !usingEraser //当橡皮擦被点击时，橡皮擦的状态改变
actions.className = 'actions x'
}
brush.onclick = function(e){
usingBrush = false
actions.className = 'actions'
}
- 画笔、橡皮擦等样式是在Iconfront上找的。
- 橡皮擦实现原理：原本是是想用
canvas画板的clearRect实现的，但是在后续保存时会出现把白色背景擦除的问题。因此改用fillStyle，把它当做一个白色画笔。
清除原理实际上是画一个白色大矩形。
context.fillStyle = 'white'
context.fillRect(0, 0, canvas.width, canvas.height)
- 保存实现原理
var url = canvas.toDataURL('image/png')
var a = document.createElement('a')
document.body.append(a)
a.href = url
a.download = 'peppa'
a.click()
12.颜料盘的颜色特地用了纹路(noisy)，目的是为了更逼真一点。实现方法非常简单，只需要一张半透明的纹路图，在网上都可以在生成。
background-image: url(img-noise-361x370.png);
background-color: black;
- 考虑到手机的适配。手机的宽度默认会设置成980px，会把图标等比例缩小，因此需要在
html文件先设置下手机页面的宽度。
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
- 判断是否是触摸屏设备
document.body.ontouchstart === undefined
- 对应的监听事件也要改为
ontouchstart,ontouchmove,ontouchend - 刷新窗口大小
//刷新Canvas的大小
window.onresize = function () {
setCanvasSize();
}
