(7)变换
translate:偏移,从起始点为基准点,移动当前坐标位置
rotate:旋转(参数为弧度)
scale:缩放
例如:
window.onload = function(){ oGC.translate(100,100);//起始点x,y偏移100 |
案例:旋转的小方块
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var num = 0; var num2 = 0; var value = 1; setInterval(function(){ num++; oGC.save(); oGC.clearRect(0,0,oC.width,oC.height); oGC.translate(100,100); if(num2 == 100){ value = -1; }else if(num2 == 0){ value = 1; } num2 += value; oGC.scale( num2*1/50,num2*1/50 ); oGC.rotate(num*Math.PI/180); oGC.translate(-50,-50); oGC.fillRect(0,0,100,100); oGC.restore(); },30); }; |
(8)插入图片
等图片加载完,再执行canvas操作:图片预加载,在onload中调用方法
drawImage(oImg, x, y, w, h):oImg(当前图片),x、y坐标,w、h宽高
window.onload = function(){ var yImg = new Image(); |
微博图片旋转效果
<!DOCTYPE html> <html> <head> <title></title> </head> <style> body{ background:black;} #c1{ background:white;} span{ color:white;} </style> <script> window.onload = function(){ var aInput = document.getElementsByTagName('input'); var oImg = document.getElementById('img1'); var yImg = new Image(); var iNow = 0; yImg.onload = function(){ draw(oImg); } yImg.src = oImg.src; function draw(obj){ var oC = document.createElement('canvas'); var oGC = oC.getContext('2d'); oC.width = obj.width; oC.height = obj.height; obj.parentNode.replaceChild(oC, obj); oGC.drawImage(obj, 0, 0); aInput[0].onclick = function(){ if(iNow == 0){ iNow = 3 }else{ iNow--; } toChange(); } aInput[1].onclick = function(){ if(iNow == 3){ iNow = 0 }else{ iNow++; } toChange(); } function toChange(){ switch(iNow){ case 1: oC.width = obj.height; oC.height = obj.width; oGC.rotate(90*Math.PI/180); oGC.drawImage(obj, 0, -obj.height); break; case 2: oC.width = obj.width; oC.height = obj.height; oGC.rotate(180*Math.PI/180); oGC.drawImage(obj, -obj.width, -obj.height); break; case 3: oC.width = obj.height; oC.height = obj.width; oGC.rotate(270*Math.PI/180); oGC.drawImage(obj, -obj.width, 0); break; case 0: oC.width = obj.width; oC.height = obj.height; oGC.rotate(0); oGC.drawImage(obj, 0, 0); break; } } } }; </script> </head> <body> <input type="button" value="←"/> <input type="button" value="→"/> <div> <img src="2.png" id="img1"/> </div> </body> </html> |
(9)设置背景
createPattern(oImg, 平铺方式)——平铺方式:repeat、repeat-x、repeat-y、no-repeat
window.onload = function(){ function draw(obj){ |
(10)渐变
createLinearGradient(x1, y1, x2, y2):线性渐变,起始点坐标(x1, y1),结束点坐标(x2, y2);addColorStop(位置, 颜色) 添加渐变点
window.onload = function(){ window.onload = function(){ |
createRadialGradient(x1, y1, r1, x2, y2, r2):放射性渐变,第一个圆的坐标和半径(x1, y1, r1),第二个圆的坐标和半径(x2, y2, r2)
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); var obj = oGC.createRadialGradient(200, 150, 100, 200, 150, 150); obj.addColorStop(0, 'red'); obj.addColorStop(0.5, 'yellow'); obj.addColorStop(1, 'blue'); oGC.fillStyle = obj; oGC.fillRect(0, 0, oC.width, oC.height); }; |
(11)文本
stokeText(文字, x, y):文字边框
fillText(文字, x, y):文字填充
font:文字大小
textAlign:默认是start跟left一样的效果end、right、center
textBaseline:文字上下的位置方式,默认alphabetic
measureText()方法:measureText(str).width——获取文字的宽度,没有获取高度的方法
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.font = '60px impact';//文字大小 样式 oGC.textBaseline = 'top'; var w = oGC.measureText('妙味课堂').width; // 文字居中显示 oGC.fillText('妙味课堂', (oC.width-w)/2, (oC.height-60)/2); }; |
(12)阴影
shadowOffsetX、shadowOffsetY:x轴偏移、y轴偏移
shadowBlur:高斯模糊值
shadowColor:阴影颜色
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.font = '60px impact';//文字大小 样式 oGC.textBaseline = 'top'; oGC.shadowOffsetX = 10; oGC.shadowOffsetY = 10; oGC.shadowBlur = 5; // alert(oGC.shadowColor)//默认颜色,黑色透明 oGC.shadowColor = 'yellow'; var w = oGC.measureText('妙味课堂').width; oGC.fillText('妙味课堂', (oC.width-w)/2, (oC.height-60)/2); }; |
(13)像素
getImageData(x, y, w, h):获取图像数据
putImageData(获取图像, x, y):设置新的图像数据
属性——width(一行的像素个数),height(一列的像素个数),data(一个数组,包含每个像素的rgba四个值,每个值都是在0~255之间的整数)
window.onload = function(){ oGC.fillRect(0, 0, 100, 100); var oImg = oGC.getImageData(0, 0, 100, 100); // alert(oImg.width); //一行的像素个数 // alert( oImg.data[0] ); //0 - 255 黑色到白色 for (var i = 0; i<oImg.width*oImg.height; i++) { |
createImageData(w, h):生成新的像素矩阵,初始值是全透明的黑色,即(0, 0, 0, 0)
例子:像素现字
<!DOCTYPE html> window.onload = function(){ |
获取和设置指定坐标:封装:getXY、setXY
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.fillRect(0, 0, 100, 100); var oImg = oGC.getImageData(0, 0, 100, 100); // alert( getXY(oImg, 3, 5) ); // setXY(oImg, 3, 5, [255, 0, 0, 255]); for(var i=0;i<oImg.width;i++){ setXY(oImg, i, 5, [255, 0, 0, 255]);//针对一行一列进行操作 } oGC.putImageData(oImg, 100, 100) function getXY(obj, x, y){ var w = obj.width; var h = obj.height; var d = obj.data; var color = []; color[0] = d[4*(y*w+x)]; color[1] = d[4*(y*w+x)+1]; color[2] = d[4*(y*w+x)+2]; color[3] = d[4*(y*w+x)+3]; return color; } function setXY(obj, x, y, color){ var w = obj.width; var h = obj.height; var d = obj.data; d[4*(y*w+x)] = color[0]; d[4*(y*w+x)+1] = color[1]; d[4*(y*w+x)+2] = color[2]; d[4*(y*w+x)+3] = color[3]; } }; |
图片的像素操作:必须是同源下,例子:反色、倒影、渐变等、马赛克效果
在chrome会提示:
"Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at HTMLImageElement.document.getElementById.onload"的错误信息
在IE中会提示:
"security error!"的错误信息
原因:图片存储在本地时,是默认没有域名的,用getImageData方法时,浏览器会判定为跨域而报错
方法:把图片放置在服务器中,通过服务器返回给客户端,遵循同源策略
window.onload = function(){ yImg.onload = function(){ function draw(obj){ function draw(obj){ function draw(obj){ |
(14)合成
全局阿尔法值:globalAlpha
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.fillRect(0, 0, 100, 100); oGC.fillStyle = 'red'; oGC.globalAlpha = '0.5'; oGC.fillRect(50, 50, 100, 100); }; |
覆盖合成——源:新的图形;目标:已经绘制过的图形
globalCompositeOperation属性(source-over、destination-over、source-atop、destination-atop、source-in、destination-in、source-out、destination-out、lighter、copy、xor)
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); oGC.fillRect(0, 0, 100, 100); oGC.fillStyle = 'red'; // oGC.globalCompositeOperation = 'source-over' // oGC.globalCompositeOperation = 'destination-over' oGC.fillRect(50, 50, 100, 100); }; |
source-over | destination-over | ||
source-atop | destination-atop | ||
source-in | destination-in | ||
source-out | destination-out | ||
lighter | xor | ||
copy |
(15)将画布导出为图像:toDataURL(火狐右键可以直接导出成图片)
oC.toDataURL()——base64图片
(16)事件操作:isPointInPath(是否在点击范围内)——jCanvasScript(canvas中的jquery):http://jcscript.com
window.onload = function(){ var c1 = new Shape(100, 100, 50); function Shape(x, y, r){ oGC.beginPath(); |
演示jCanvasScript
window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); jc.start('c1',true); //第二个参数:代表重绘的意思 //jc.rect(100,100,50,50,'#ff0000',1); // jc.circle(100,100,50,'#ff0000',1).click(function(){ // alert(123); // }); // 拖拽 // jc.circle(100,100,50,'#ff0000',1).draggable(); // 外部点击修改颜色 jc.circle(100,100,50,'#ff0000',1).id('c1'); jc.start('c1'); var oInput = document.getElementById('input1'); oInput.onclick = function(){ jc('#c1').color('#ffff00').animate({x:200,y:200,radius:5},2000);//链式操作运动效果 }; jc.start('c1'); }; |