canvas使用3-白红宇

canvas使用3

阅读量：6835 次

发布时间：2019-06-26

本文共 3427 字，大约阅读时间需要 11 分钟。

颜色合成 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;
}
           
         