美文网首页
canvas制图做刮刮卡效果

canvas制图做刮刮卡效果

作者: 哼_ | 来源:发表于2017-12-19 10:45 被阅读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>

    效果图展示


    未刮开效果
    刮开效果

    相关文章

      网友评论

          本文标题：canvas制图做刮刮卡效果

          本文链接：https://www.haomeiwen.com/subject/swlbwxtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|canvas制图做刮刮卡效果|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！