HTML-Canvas03

颜色合成 globalCompositeOperation 属性：

//先绘制一个图形。

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();

　

ctx.globalCompositeOperation = "copy";

//copy:只图像绘新图像，删除其它图像。

　　

ctx.globalCompositeOperation = "darker";

//darker:在图形重叠的地方，其颜色由两个颜色值相减之后决定。

　　

ctx.globalCompositeOperation = "destination-atop";

//destination-atop:画布上已有的内容只会在它和新图像重叠的地方保留。

　　

ctx.globalCompositeOperation = "destination-in";

//destination-in:画布上已有的内容和新图像重叠的地方，保留已有的内容。

　　

ctx.globalCompositeOperation = "destination-out";

//destination-in:画布上已有的内容和新图像不重叠的地方，保留已有的内容。

　　

ctx.globalCompositeOperation = "destination-over";

//destinationo-ver:新图像绘制在已由图像下面。

　　

ctx.globalCompositeOperation = "lighter";

//darker:在图形重叠的地方，其颜色由两个颜色值相加之后决定。

　　

ctx.globalCompositeOperation = "source-atop";

//source-atop:在与已有图形重叠的地方，才显示的绘制新图像。

　　

ctx.globalCompositeOperation = "source-ind";

//source-in:在与已有图形重叠的地方，才显示的绘制新图像 ,忽略原有图像。

　　

ctx.globalCompositeOperation = "source-out";

//source-out:在与已有图形不重叠的地方，才显示绘制的新图像。

　　

ctx.globalCompositeOperation = "xor";

//xor:在重叠和正常绘制的其它地方的地方，图像都为透明。

　　

颜色反转 ：

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);

}

　　

阴影效果：

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);

}

　　

自定义画板：

• 建立画板

  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;
  
  };
  
  }
  

  　　

• 完整画板与导出功能：

  //添加按钮
  
  <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;
  
  }