canvas制图做刮刮卡效果
2017-12-19 本文已影响6人
哼_
感谢小厨笔记的代码,事件那块写的很好.
其实我一开始只是想把变形金刚画出来,最后画成这样了.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
<style>
body{
position: relative;
}
#canvas{
border:1px solid #ccc;
display: block;
margin: 20px auto;
position: absolute;
z-index: 9;
}
#box{
border:1px solid #ccc;
display: block;
margin: 20px auto;
position: absolute;
text-align: center;
width:700px;
height: 700px;
line-height: 700px;//重叠div和canvas,用z-index和position:absolute重叠两个元素,
}
</style>
</head>
<body>
<div id="box"></div>
<canvas id="canvas" width="700" height="700"></canvas>
</body>
<script>
function drawGrid(CANVAS_WIDTH,CANVAS_HEIGHT,GRID_WIDTH,GRID_HEIGHT){
var rows=parseInt(CANVAS_WIDTH/GRID_WIDTH);
var cols=parseInt(CANVAS_HEIGHT/GRID_HEIGHT);
for(var i=0;i<rows;++i) {
for(var j=0;j<cols;++j)
{
drawRect(i,j,GRID_WIDTH,GRID_HEIGHT);
if(i==0||j==0)
{
drawText(i,j,GRID_WIDTH,GRID_HEIGHT); //增加坐标
}
}
}
}
drawGrid(700,700,50,50)
// 绘制矩形
var myCanvas = document.getElementById("canvas");
var ctx=myCanvas.getContext("2d");
console.log(ctx)
function drawRect(i,j,GRID_WIDTH,GRID_HEIGHT){
var ctx=document.getElementById("canvas").getContext("2d");
ctx.lineWidth=0.5;
ctx.fillStyle="#ccc";
ctx.strokeRect(i*50,j*50,GRID_WIDTH,GRID_HEIGHT);
}
//绘制横坐标与纵坐标
function drawText(i,j,GRID_WIDTH,GRID_HEIGHT){
var ctx=document.getElementById("canvas").getContext("2d");
var x_axis=i*50+"";
var y_axis=j*50+"";
}
ctx.beginPath();
ctx.fillStyle = "#8b9096"
ctx.lineWidth="6";
ctx.moveTo(8*2,17*2);
ctx.lineTo(24*2,102*2);
ctx.lineTo(67*2,130*2);
ctx.lineTo(120*2,139*2);
ctx.lineTo(113*2,82*2);
ctx.lineTo(64*2,51*2);
ctx.lineTo(57*2,22*2);
ctx.lineTo(16,34);
ctx.fill()
ctx.beginPath();
ctx.fillStyle = "#8b9096"
ctx.moveTo(59*2,22*2);
ctx.lineTo(65*2,48*2);//65+158
ctx.lineTo(142*2,98*2);
ctx.lineTo(220*2,48*2);
ctx.lineTo(224*2,22*2);
ctx.quadraticCurveTo(300, 0, 59*2,22*2);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#8b9096"
ctx.moveTo(227*2,22*2);
ctx.lineTo(280*2,16*2);
ctx.lineTo(259*2,102*2);
ctx.lineTo(220*2,130*2);
ctx.lineTo(165*2,140*2);
ctx.lineTo(174*2,82*2);//
ctx.lineTo(222*2,51*2);//
ctx.lineTo(227*2,22*2);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#8b9096"
ctx.moveTo(115*2,85*2);
ctx.lineTo(122*2,144*2);
ctx.lineTo(124*2,204*2);
ctx.lineTo(161*2,204*2);
ctx.lineTo(163*2,144*2);
ctx.lineTo(170*2,84*2);
ctx.lineTo(142*2,102*2);
ctx.lineTo(115*2,85*2);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#8b9096"
ctx.moveTo(31*2,110*2);
ctx.lineTo(37*2,213*2);
ctx.lineTo(83*2,249*2);
ctx.lineTo(83*2,157*2);
ctx.lineTo(66*2,143*2);
ctx.lineTo(64*2,133*2);
ctx.lineTo(31*2,110*2);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#8b9096"
ctx.moveTo(255*2,110*2);
ctx.lineTo(247*2,213*2);
ctx.lineTo(202*2,249*2);
ctx.lineTo(202*2,157*2);//∠近或者元
ctx.lineTo(220*2,143*2);
ctx.lineTo(220*2,133*2);
ctx.lineTo(255*2,110*2);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#8b9096"
ctx.moveTo(121*2,231*2);
ctx.lineTo(107*2,268*2);
ctx.lineTo(179*2,268*2);
ctx.lineTo(165*2,231*2);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#8b9096"
ctx.moveTo(86*2,157*2);
ctx.lineTo(86*2,251*2);
ctx.lineTo(105*2,266*2);
ctx.lineTo(120*2,228*2);
ctx.lineTo(166*2,228*2);
ctx.lineTo(181*2,266*2);
ctx.lineTo(198*2,251*2);
ctx.lineTo(198*2,157*2);
ctx.lineTo(164*2,143*2);
ctx.lineTo(164*2,206*2);
ctx.lineTo(120*2,206*2);
ctx.lineTo(120*2,143*2);
ctx.lineTo(86*2,157*2);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#fff"
ctx.moveTo(114*2,41*2);
ctx.lineTo(172*2,41*2);
ctx.lineTo(142*2,61*2);
ctx.lineTo(114*2,41*2);
ctx.fill();
//脸上的白线
ctx.beginPath();
ctx.fillStyle = "#fff"
ctx.moveTo(39*2,55*2);
ctx.lineTo(39*2,58*2);
ctx.lineTo(92*2,92*2);
ctx.lineTo(92*2,89*2);
ctx.lineTo(39*2,55*2);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#fff"
ctx.moveTo(44*2,79*2);
ctx.lineTo(44*2,82*2);
ctx.lineTo(95*2,115*2);
ctx.lineTo(95*2,112*2);
ctx.lineTo(44*2,79*2);
ctx.fill();
//右边脸上的白线
ctx.beginPath();
ctx.fillStyle = "#fff"
ctx.moveTo(247*2,55*2);
ctx.lineTo(247*2,58*2);
ctx.lineTo(193*2,92*2);
ctx.lineTo(193*2,89*2);
ctx.lineTo(247*2,55*2);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#fff"
ctx.moveTo(240*2,79*2);
ctx.lineTo(240*2,82*2);
ctx.lineTo(189*2,115*2);
ctx.lineTo(189*2,112*2);
ctx.lineTo(240*2,79*2);
ctx.fill();
// ctx.beginPath();
// ctx.fillStyle = "#ccc"
// ctx.rect(250*2,250*2,200,100);
// ctx.fill();
var box = document.getElementById("box")
box.innerHTML = "谢谢惠顾";
box.style.fontSize = "50px"
var isDown = false;//鼠标是否按下的标志
var pointerArr = []; //鼠标移动坐标数组
var xPointer = 0;//鼠标当前x坐标
var yPointer = 0;//鼠标当前y坐标
//pc，移动事件兼容写法
var hastouch = "ontouchstart" in window ? true : false,
// ontouchstart存在window么,存在hastouch为true,不存在hastouch为false;
tapstart = hastouch ? "touchstart" : "mousedown",
tapmove = hastouch ? "touchmove" : "mousemove",
tapend = hastouch ? "touchend" : "mouseup";
//鼠标按下
myCanvas.addEventListener(tapstart,function (event){
var e = window.event || event;
this.style.cursor = "move";
//此光标指示某对象可被移动
isDown = true;
xPointer = hastouch ? e.targetTouches[0].pageX : e.clientX - this.offsetLeft;
yPointer = hastouch ? e.targetTouches[0].pageY : e.clientY - this.offsetTop;;
pointerArr.push([xPointer, yPointer]);
circleReset(ctx);
})
//鼠标按下后拖动
myCanvas.addEventListener(tapmove, function(event) {
var e=window.event||event;//2017-12-06
if (isDown) {
xPointer = hastouch ? e.targetTouches[0].pageX : e.clientX - this.offsetLeft;;
yPointer = hastouch ? e.targetTouches[0].pageY : e.clientY - this.offsetTop;;
pointerArr.push([xPointer, yPointer]);
circleReset(ctx);
}
});
//鼠标抬起取消事件
myCanvas.addEventListener(tapend, function(event) {
isDown = false;
pointerArr = [];
});
//圆形橡皮檫
function circleReset(ctx) {
ctx.save();
ctx.beginPath();
ctx.moveTo(pointerArr[0][0], pointerArr[0][1]);
ctx.lineCap = "round"; //设置线条两端为圆弧
ctx.lineJoin = "round"; //设置线条转折为圆弧
ctx.lineWidth = 10;
ctx.globalCompositeOperation = "destination-out";
if (pointerArr.length == 1) {
ctx.lineTo(pointerArr[0][0] + 1, pointerArr[0][1] + 1);
} else {
for (var i=1;i<pointerArr.length;i++) {
ctx.lineTo(pointerArr[i][0], pointerArr[i][1]);
ctx.moveTo(pointerArr[i][0], pointerArr[i][1]);
}
}
ctx.closePath();
ctx.stroke();
ctx.restore();
}
</script>
</html>
效果图展示
未刮开效果
刮开效果
