/** * 小生爱 * Canvas 教程 * 注意的地方 : * 宽高不能写在CSS里 必须写在标签里 否则会影响画图 * 如果需要动态改变canvas的大小 必须使用canvas.width=xx; canvas.height=xx; * 动态创建canvas的大小可以用js动态插入 * 方法 * getContext 获取context对象 包含所有Canvas API 2d 生成2D平面图案 * closePath 闭合路径 省略了一次lineTo * stroke 进行线的着色 这时线才可见 * fillRect 绘制实心矩形 (x, y, width, height) fillStyle 填充色 * strokeRect 绘制空心矩形 (x, y, width, height) * clearRect 清除某个矩形区域的内容 (x, y, width, height) * fillText 绘制实心字 (string, x, y) * strokeText 绘制空心字 (string, x, y) * arc 画圆形 弧形 (x, y, 半径, 起始弧度, 结束弧度, false(顺时针画)|true(逆时针画)) 满弧度2*Math.PI 水平左侧是0 右侧1PI 每隔90增加0.5PI * beginPath 开始绘制路径 如果不调用该方法所有绘制的图形将连接在一起 该方法类似把笔抬起来 * moveTo 起始位置 (x, y) * lineTo 结束位置 (x, y) * fill 填充区域颜色 * createLinearGradient 创建线性渐变对象 (x0, y0, x1, y1) 线性渐变对象.addColorStop(num, 颜色) *注[可以设置无数个addColorStop] * createRadialGradient 创建放射性渐变 (起始圆x坐标, 起始圆y坐标, 起始圆半径, 结束圆x坐标, 结束圆y坐标, 结束圆半径) *注 : 起始圆与结束圆必须交合才有效果 * drawImage 绘制图像 可以截取图片 视频 画布 *注[只有2种参数状态 4个参数|满参数] (img|video|canvas, sx, sy, swidth, sheight, x, y, widht, height) *注 : 满参数时的参数属性 img 要使用的图片 视频 画布 sx 开始剪切的x坐标位置 sy 开始剪切的y坐标位置 swidth 剪切的图像宽度 sheight 剪切的图像高度 x 在画布上放置图像的x坐标位置 y 在画布上放置图像的y坐标位置 width 要使用的图像宽度 height 要使用的图像高度 *注 : 5个参数时的参数属性 x 在画布上放置图像的x坐标位置 y 在画布上放置图像的y坐标位置 width 要使用的图像宽度 height 要使用的图像高度 *注 : 3个参数时的参数属性 img 要使用的图片 视频 画布 x 在画布上放置图像的x坐标位置 y 在画布上放置图像的y坐标位置 * getImageData 返回ImageData对象 该对象拷贝了画布指定矩形的像素数据 (ctx, x0, y0, x1, y1) 该对象保存指定矩形的所有像素 每个像素保存四方面信息 RGBA值 ImageData[0] R ImageData[1] G ImageData[2] B ImageData[3] A 255满值 * putImageData 方法将图像数据(从指定的ImageData对象)放回画布上 *注 : 满参数 (ImageData, x, y, drityX, drityY, drityWidth, drityHeight) ImageData 规定要放回画布的ImageData对象 x x坐标(初始位置) y y坐标(初始位置) drityX 从初始位置开始 在画布上放置图像的位置 drityY 从初始位置开始 在画布上放置图片的位置 drityWidth 绘制图像所使用的画布的宽度(不是设置图片的宽度) drityHeight 绘制图像所使用的画布的高度(不是设置图片的宽度) *注 : 3个参数 (ImageData, x, y) ImageData 规定要放回画布的ImageData对象 x x坐标(初始位置) y y坐标(初始位置) *注[getImageData putImageData与dragImage的区别 一个是截取画布 一个是截取某一个视频|图片] * toDataURL 将canvas画布转换成图片 canvas.toDataURL(图片格式 image/jpeg | image/png | image/gif) * rect 创建一个矩形路径 该路径可以用fill填充颜色 *注[rect 需要调用stroke()才可见路径 strokeRect不需要调用stroke] * createPattern 在指定的方向内重复指定的元素 元素可以是图片、视频，或者其他 元素 被重复的元素可用于绘制/填充矩形、圆形或线条 (image, repeat, repeat-x, repeat-y, no-repeat) * clip 从原始画布中剪切任意形状和尺寸 以后的任意绘制只能在被剪切的区域内看到只能剪切路径 例如rect moveTo等方法画的路径 *注[该方法类似flash的蒙板效果 可以绘制多个路径 如果调用了beginPath则调用clip时 默认取最后一个beginPath后的路径] (注 : 该方法裁切有锯齿) * save 保存调用该方法之前的画布效果进行保存 restore 对之前的画布进行恢复 * arcTo 创建2个切线之间的弧线 (x1, y1, x2, y2, r) x1 弧的起点x坐标 y1 弧的起点y坐标 x2 弧的终点x坐标 (?!没有犯罪前科).*犯罪前科 y2 弧的终点y坐标 r 弧的半径 *注[该方法是在2条切线间创建一个弧度 2条切线是指 : (弧的起点坐标到moveTo的线 与 弧的起点坐标与 弧的终点坐标的直线)在这2条线之间创建一个弧度] * isPointInPath 判断某个点是否在画布的某个路径上 返回true false 例 : ctx.isPointInPath(20, 50); * scale 缩放绘图 随后的属性都会被缩放包括定位等 (numX, numY) * rotate 旋转绘图 *注[旋转中心点如果不在绘图上 以旋转点到绘图为一个大绘图旋转 以此理解旋转状态] (angle 旋转弧度 角度*Math.PI/180) * translate 设置画布中的(0, 0)位置 * transform 设置绘图的缩放 倾斜 移动 (a, b, c, d, e, f) a 水平缩放绘图 b 水平倾斜绘图 c 垂直倾斜绘图 d 垂直缩放绘图 e 水平移动绘图 f 垂直移动绘图 setTrasform 设置绘图的缩放 倾斜 移动 该方法与transform的区别是每次调用setTransform都会重置变 换矩阵 例如调用了scale属性然后调用setTransform则scale属性取消 (a, b, c, d, e, f) a 水平缩放绘图 b 水平倾斜绘图 c 垂直倾斜绘图 d 垂直缩放绘图 e 水平移动绘图 f 垂直移动绘图 * 返回字体宽度 measureText 返回字体宽度 (txt) 例:measureText(txt).width * createImageData 创建空白的ImageData对象 有2种方式创建ImageData对象 // 以指定尺寸(以像素计)创建新的ImageData对象 ctx.createImageData(width, height) 创建与指定的另一个ImageData对象尺寸相同的新ImageData 只是尺寸相同 ctx.createImageData(imageData) * globalCompositeOperation : 如何将一个新的图像绘制到已有的图像上 该效果只支持2种状态 不管画布上已有多少个绘图 只有新和已有2种状态 (注 : 该方法裁切没有锯齿 建议使用) source-over 默认。在目标图像上显示源图像 source-atop 在目标图像顶部显示源图像 源图像位于目标图像之外的部分是不可见的 source-in 在目标图像中显示源图像 只有目标图像内的源图像部分会显示，目标图像是透明的 source-out 在目标图像之外显示源图像 只会显示目标图像之外源图像部分，目标图像是透明的 destination-over 在源图像上方显示目标图像 destination-atop 在源图像顶部显示目标图像 源图像之外的目标图像部分不会被显示 destination-in 在源图像中显示目标图像 只有源图像内的目标图像部分会被显示，源图像是透明的 destination-out 在源图像外显示目标图像 只有源图像外的目标图像部分会被显示，源图像是透明的 lighter 显示源图像 + 目标图像 copy 显示源图像 忽略目标图像 source-over 使用异或操作对源图像与目标图像进行组合 * 属性 * lineWidth 设置路径线宽 * strokeStyle 设置路径颜色 * font 设置字体 '粗细 大小 字体' 该顺序不能颠倒 * textAlign 设置对齐方式 start 默认 end 以x位置对齐文本右侧 center 以x位置为中心放置文本 left 以x位置对齐文本左侧 right 以x位置对齐文本右侧 * shadowBlur 模糊半径 * shadowOffsetX 阴影x轴方向距离 shadowOffsetY 阴影y轴方向距离 * shadowColor 阴影颜色填充 * lineCap 设置或返回线条末端线帽的样式 *注[round square会使线条略微变长] butt 默认，向线条的每个末端添加平直的边缘 round 向线条的每个末端添加圆形线帽 square 向线条的每个末端添加正方形线帽 * lineJoin 设置或返回所创建边角的类型 miter 默认，创建尖角 bevel 创建斜角 round 创建圆角 * width 返回ImageData对象的宽度, 以像素计 c.canvas.width c.canvas.height * height 返回ImageData对象的高度, 以像素计 * globalAlpha 返回或设置图像的透明度 不能返回rgba设置的透明度 * fillStyle 填充颜色 */ // Canvas 实例一 绘制路径方法_________________________________________________________________________ var can = document.getElementById('my'); if(can.getContext){ var ctx = can.getContext('2d'); // 开始绘制路径 ctx.beginPath(); // 起始点 ctx.moveTo(20, 20); // 结束点 ctx.lineTo(50, 100); // 结束点 ctx.lineTo(100, 120); // 线宽 ctx.lineWidth = '1px'; // 线颜色 ctx.strokeStyle = '#000000'; // 自动闭合路径 ctx.closePath(); // 着色 // 着色以后才能看到绘制的线 ctx.stroke(); }; // Canvas 实例二 绘制矩形_________________________________________________________________________ var can = document.getElementById('my'); /* 绘制空心矩形 */ var ctx = can.getContext('2d'); // 绘制方法 ctx.strokeRect(20, 20, 100, 50); /* 绘制实心矩形 */ ctx.fillRect(20, 75, 100, 50); // 填充颜色 ctx.fillStyle = '#000'; /* 清除矩形区域 */ // 绘制实心矩形 ctx.fillRect(125, 20, 100, 50); // 清除矩形区域 ctx.clearRect(130, 40, 20, 20); // Canvas 实例三 绘制文本_________________________________________________________________________ var can = document.getElementById('my'); /* 绘制文本 */ var ctx = can.getContext('2d'); // 设置字体样式 大小 字体 ctx.font = '20px 微软雅黑'; // 设置对齐方式 ctx.textAlign = 'right'; // 填充文本颜色 ctx.fillStyle = '#C00'; // 绘制实心文本 ctx.fillText('小生爱', 120, 20); // 绘制空心文本 ctx.strokeText('hello aaaa', 120, 100); // Canvas 实例四 绘制圆形_________________________________________________________________________ var can = document.getElementById('my'); var ctx = can.getContext('2d'); ctx.beginPath(); /* 绘制弧形 */ ctx.strokeStyle = '#00CC00'; // 逆时针画弧形 ctx.arc(50, 50, 30, 1*Math.PI, 1.5*Math.PI, true); // 设置区域颜色 ctx.fillStyle = 'rgba(0, 255, 0, 0.5)'; // 填充该区域 ctx.fill(); // 给线着色 ctx.stroke(); // 如果不用beginPath画的内容会连接在一起 ctx.beginPath(); /* 绘制弧形 */ ctx.strokeStyle = '#CC0000'; // 设置区域颜色 ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 逆时针画弧形 ctx.arc(80, 50, 30, 0.5*Math.PI, 1.5*Math.PI, false); // 填充该区域颜色 ctx.fill(); // 给线着色 ctx.stroke(); // Canvas 实例五 线性渐变效果_________________________________________________________________________ var can = document.getElementById('my'); var ctx = can.getContext('2d'); // 开始绘制路径 ctx.beginPath(); // 创建线性渐变对象 // (x0, y0, x1, y1) var grad = ctx.createLinearGradient(10, 10, 100, 100); // 渐变的颜色和位置 // 表示其中的一个位置 grad.addColorStop(0, '#C00'); // 另一个渐变的颜色和位置 // 表示其中的另一个位置 grad.addColorStop(0.3, '#35E'); grad.addColorStop(0.8, '#000'); // 用渐变对象grad填充矩形 ctx.fillStyle = grad; // 创建矩形 ctx.fillRect(0, 0, 100, 100); // Canvas 实例六 放射性渐变效果_________________________________________________________________________ var can = document.getElementById('my'); var ctx = can.getContext('2d'); /** 放射性渐变 */ // 实例1 // 开始绘制路径 ctx.beginPath(); // 放射性渐变方法 // x0, y0, r0, x1, y1, r1 var grad = ctx.createRadialGradient(120,120,0,140,140,100); // 渐变关键点 // 取值范围0-1 grad.addColorStop(0, '#C99'); grad.addColorStop(1, '#000'); // 用渐变对象grad填充矩形 ctx.fillStyle = grad; // 创建矩形 ctx.arc(150, 150, 100, 0*Math.PI, 2*Math.PI); // 填充圆形 ctx.fill(); // 实例2 灯光效果 ctx.beginPath(); // 放射性渐变方法 var grad = ctx.createRadialGradient(20,20,0,40,40,30); // 渐变关键点 // 取值范围0-1 grad.addColorStop(0, '#C99'); grad.addColorStop(1, '#000'); // 用渐变对象grad填充矩形 ctx.fillStyle = grad; // 创建矩形 ctx.arc(50, 50, 50, 0*Math.PI, 2*Math.PI); // 填充圆形 ctx.fill(); // Canvas 实例七 阴影效果_________________________________________________________________________ var can = document.getElementById('my'); var ctx = can.getContext('2d'); // 模糊半径 ctx.shadowBlur=20; // 阴影在x轴方向位置 ctx.shadowOffsetX=10; // 阴影在y轴方向位置 ctx.shadowOffsetY = 10; // 阴影颜色 ctx.shadowColor="rgba(0, 0, 0, 0.5)"; ctx.fillStyle="#09c"; ctx.fillRect(40,20,100,80); // Canvas 实例八 drawImage_________________________________________________________________________ // 根据图片绘制图片 var canvas = document.getElementById('my'); var img = document.getElementById('img'); var ctx=canvas.getContext('2d'); window.addEventListener('load', function (){ // 绘制图像 // img 图片节点 // 50, 50 截取图片的x, y坐标点 // 150, 150 截取图片大小 // 20, 20 绘制图片的位置 // 200, 150 被截取的图片展现大小 ctx.drawImage(img, 50, 50, 150, 150, 20, 20, 200, 150); }); // 根据视频绘制图片 var v=document.getElementById("video1"); var copy = function (){ copy.id && clearTimeout(copy.id); // 截取视频图片 // 参数同上 ctx.drawImage(v, 0, 0, 230, 150, 200, 180, 230, 150); copy.id = setTimeout(arguments.callee, 0); }; // 暂停时 结束绘制图片 v.addEventListener('pause', function (){ copy.id && clearTimeout(copy.id); }); v.addEventListener('ended', function (){ copy.id && clearTimeout(copy.id); }); window.addEventListener('load', function (){ copy(); }); // Canvas 实例九 getImageData putImageData_________________________________________________________________________ // 根据图片绘制图片 var canvas = document.getElementById('my'); var img = document.getElementById('img'); var ctx=canvas.getContext('2d'); img.onload = function (){ // 在画布上创建一个图片 ctx.drawImage(img, 0, 0, 100, 100); // 获取该画布初始点0, 0 // 结束点100, 100位置的像素 var d = ctx.getImageData(0, 0, 100, 100); // 获取data数据 包含所有像素点 var data = d.data; for(var i=0,length=data.length; i