canvas使用3

颜色合成 globalCompositeOperation 属性：

?

1 2 3 4 5 6 7 8 9 10 11

//先绘制一个图形。 ctx.fillStyle = "#00ff00"; ctx.fillRect(10,10,50,50); //设置 lobalCompositeOperation 属性。 ctx.globalCompositeOperation = "source-over"; //source-over:新图像绘制于画布已由图像上方。 //默认 //绘制一个新图像。 ctx.beginPath(); ctx.fillStyle = "#ff0000"; ctx.arc(50,50,30,0,2*Math.PI); ctx.fill();

　

?

1 2	ctx.globalCompositeOperation = "copy"; //copy:只图像绘新图像，删除其它图像。

　　

?

1 2	ctx.globalCompositeOperation = "darker"; //darker:在图形重叠的地方，其颜色由两个颜色值相减之后决定。

　　

?

1 2	ctx.globalCompositeOperation = "destination-atop"; //destination-atop:画布上已有的内容只会在它和新图像重叠的地方保留。

　　

?

1 2	ctx.globalCompositeOperation = "destination-in"; //destination-in:画布上已有的内容和新图像重叠的地方，保留已有的内容。

　　

?

1 2	ctx.globalCompositeOperation = "destination-out"; //destination-in:画布上已有的内容和新图像不重叠的地方，保留已有的内容。

　　

?

1 2	ctx.globalCompositeOperation = "destination-over"; //destinationo-ver:新图像绘制在已由图像下面。

　　

?

1 2	ctx.globalCompositeOperation = "lighter"; //darker:在图形重叠的地方，其颜色由两个颜色值相加之后决定。

　　

?

1 2	ctx.globalCompositeOperation = "source-atop"; //source-atop:在与已有图形重叠的地方，才显示的绘制新图像。

　　

?

1 2	ctx.globalCompositeOperation = "source-ind"; //source-in:在与已有图形重叠的地方，才显示的绘制新图像 ,忽略原有图像。

　　

?

1 2	ctx.globalCompositeOperation = "source-out"; //source-out:在与已有图形不重叠的地方，才显示绘制的新图像。

　　

?

1 2	ctx.globalCompositeOperation = "xor"; //xor:在重叠和正常绘制的其它地方的地方，图像都为透明。

　　

颜色反转 ：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

var img = new Image(); img.src="face.jpg"; img.onload = function() { ctx.drawImage(img,0,0); var imageData = ctx.getImageData(0,0,250,250); var pix = imageData.data; for(var i = 0 , n = pix.length;i<n;i += 4 ) {   pix[i] = 255-pix[i];   pix[i+1] = 255-pix[i+1];   pix[i+2] = 255 -pix[i+2]; } ctx.putImageData(imageData,250,0); }

　　

阴影效果：

?

1 2 3 4 5 6 7 8 9

ctx.shadowColor = "#f00"; //设置阴影颜色 ctx.shadowBlur=10; //设置阴影的羽化量 ctx.shadowOffsetX = 20; //设置阴影X 坐标移动量 ctx.shadowOffsetY = 30; //设置阴影Y 坐标移动量 var img = new Image(); img.src= "face.jpg"; img.onload = function() {   ctx.drawImage(img,0,0); }

　　

自定义画板：

• 建立画板
  ?

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

  var canvas = document.getElementById("myCanvas") var ctx = canvas.getContext("2d"); //绘制一个黑色矩形为画板 ctx.fillStyle="black"; ctx.fillRect(0,0,600,300); //定义一些标记 var onoff = false; //变量onoff 为判断是否按下鼠标 var oldx = -10; //由于鼠标是有大小的，这里减去 10. var oldy = -10; var linecolor = "white"; //线条颜色 var linw =4; //线条宽度 //添加鼠标事件   canvas.addEventListener("mousemove",draw,true); //注意鼠标事件是在画布“ canvas”上 的 canvas.addEventListener("mousedown",dowm,false); canvas.addEventListener("mouseup",up,false); //分别定义三个事件函数 function dowm(event) { onoff = true; //设置为true，用于判断 oldx = event.pageX-10; //jQuery 事件（event）pageX 属性： oldy = event.pageY-10; } function up() { onoff = false; } function draw(event) { if (onoff == true) { var newx = event.pageX-10; //实时取得新的坐标 var newy = event.pageY-10; ctx.beginPath(); ctx.moveTo(oldx,oldy); ctx.lineTo(newx,newy); ctx.strokeStyle = linecolor; ctx.lineWidth = linw; ctx.lineCap="round"; ctx.stroke(); oldx = newx; //在移动的过程中上一时新坐标变为下一时老坐标 oldy = newy; }; }

  　　

• 完整画板与导出功能：
  ?

  1 2 3 4 5 6 7 8 9

  //添加按钮 <butto style="width:80px;background-color:yellow;" onclick='linecolor="yellow";'>YELLOW</button> //注意这里 onclick 为单引号。 //建立以个 <img>标签，在用 toDataURL 函数导出内容 //添加代码段 function copyimage(event) {   var image_pgn_src = canvas.toDataURL("image/pgn");   document.getElementById("image_pgn").src = image_pgn_src; }