canvas图像世界

1. 处理图像，缩放、水印

2. 颜色处理
   

1、鼠标事件：

onmousemove 事件需区分是否左键触发，获取移动位置

// 图像缩放的时候水印就不在图像上面了，做个判断就行了！！！！

          // 绘制水印

            if (scale < 1) {

                w = dx + imageWidth;

                h = dy + imageHeight;

            }

            ctx.drawImage(watermarkCanvas, w - watermarkCanvas.width, 

                                           h - watermarkCanvas.height);

知乎问题：

生成图像效果

imageData.data

putImageData

获取图像像素

Canvas坐标转换

drawImage贴图形式

drawImage三种调用方式

drawImage 7参数

图像的一部分渲染到画布的一部分上

drawImage

图像绘制代码：

imageData.data

四个值一组记录一个像素的rgba

getImageData(x, y, w, h)

三种调用.

马赛克即将某一个区域全部赋值为该区域的平均值

模糊算法即根据周围像素的平均值来赋值

计算图像灰度的公式grey = 0.3*r+0.59*g+0.11*b

imageData.data是一个一维数组，每四个数字是一个像素点信息

putImageData可以将ImageData放回canvas中

getImageData可以获取图像的像素信息

beginPath、arc、clip依次调用可以产生圆形区域

隐藏一个原图的canvas，将原图的内容复制到真正显示的canvas上

离屏canvas应用：水印

canvas保存的图片是经过缩放之后的图片（即canvas内部当前的内容）

drawImage可以不传入image而传入canvas

可以设置滑动条的min和max数值

input的type设为range为滑动条