ysyのblog

canvas 实现图片打码

对基础api的掌握
- ctx.drawImage(img, x, y, img.width, img.height)
- 获取像素 ctx.getImageData(x1, y1, x2, y2) 返回的对象有三个属性，width、height、data（所有像素的rgba做成的数组）
- 设置像素ctx.putImageData(imageData, x, y)
- 创建像素区域，默认黑色透明 ctx.createImageData(width, height)
难点
- 封装两个方法：取像素点的rgba、设置像素点的rgba
- 打码：取一块像素区域中的rbga覆盖整个像素区域

canvas 画一个时钟

原来canvas还有作用域这回事儿
canvas中的save()和restore()限定了样式的作用范围（包括：fillStyle、strokeStyle、lineWidth、lineCap以及一些变换方法）
用户友好处理，在canvas标签中向用户给出canvas不兼容的提示和处理方法

基本上用这样的套路去绘制

canvas.save()
//这里写样式
canvas.beginPath()
//这里绘图形
canvas.restore()

2019-10-13

for循环中的switch case

canvas 实现图片打码