颜色取反
点击取反按钮,将照片的色值取反,看起来像是照片底片的样子。
html和css没什么说的,几乎没有改变样式,直接标签写上去就行,主要说js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "girl.jpg"; //照片路径
img.onload = function() {
ctx.drawImage(img,0,0,canvas.width,canvas.height);
//获取所有像素点
var getColor = ctx.getImageData(0,0,canvas.width,canvas.height);
var btn = document.getElementById("btn");
btn.onclick = function() {
//循环像素点
var l = getColor.data.length;
for(var i = 0;i < l;i++) {
if((i + 1) % 4 != 0) {
getColor.data[i] = 255 - getColor.data[i];
}
}
//把循环后的像素点绘制到canvas
ctx.putImageData(getColor,0,0);
}
}
刮刮卡
按住左键移动鼠标,实现类似刮刮卡的效果。
HTML中将canvas定位到img上面,主要说js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "#ccc";
ctx.fillRect(0,0,600,400);
ctx.closePath();
//设置onmousedown事件
canvas.onmousedown = function(e) {
var even = e || event;
ctx.beginPath();
canvas.onmousemove = function(e) {
var even = e || event;
var actx = even.clientX - canvas.offsetLeft - 1;
var acty = even.clientY - canvas.offsetTop - 1;
//清空重叠部分留下老图
ctx.globalCompositeOperation = "destination-out";
//根据坐标点画圆
ctx.arc(actx,acty,30,0,2 * Math.PI);
ctx.fill();
//超过80% 全透明
var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
//声明一个变量存储数据
var count = 0;
var l = imgData.data.length;
console.log(imgData.data);
//循环像素点
for(var i = 3;i < l;i+=4) {
if(imgData.data[i] == 0) {
count++;
}
}
//判断透明是否不小于80%
if(count /(l/4) >= 0.8) {
ctx.clearRect(0,0,canvas.width,canvas.height);
}
ctx.closePath();
}
//鼠标弹起事件
window.onmouseup = function() {
canvas.onmousemove = null;
}
}
画板
可以选择画笔宽度,点击颜色打开调色板进行选色,实现类似画板的效果;
同样html和css不做介绍,注意调色板使用input type=color来实现的,还是重点说js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.save();
ctx.beginPath();
$("canvas").mousedown(function(e) {
var even = e || event;
ctx.beginPath();
ctx.strokeStyle = $("input").eq(1).val();
ctx.lineWidth = $("select option:selected").text() * 2;
ctx.moveTo(even.clientX, even.clientY);
$("canvas").mousemove(function(e) {
var even = e || event;
ctx.lineTo(even.clientX, even.clientY);
ctx.stroke();
});
});
$("canvas").mouseup(function() {
ctx.closePath();
$("canvas").unbind("mousemove");
});
$("input").eq(0).click(function() {
ctx.clearRect(0,0,600,600);
});
画板还可以添加橡皮擦效果,这样可以让效果更丰富。