目 录CONTENT

文章目录

canvas

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 7182 阅读 / 3359 字

Canvas画布

常用方法与属性

  1. moveTo画笔移动到某一个点
  2. lineTo直线到某一个点
  3. stroke()开始画(描边)
  4. strokeRect()画矩形 空心矩形
  5. strokeStyle设置描边的颜色
  6. fillRect()填充一个矩形
  7. fillStyle设置填充的颜色
  8. strokeText空心的文字
  9. font用于设置字体
  10. fillText填充文字
  11. beginPath相当于提起笔了
  12. closePath相当于把笔放在砚台上面 再次去绘制的时候,就需要moveTo
  13. drawImage画图片
  14. clearRect清除一个矩形区域

案例

下面是一个刮刮乐的案例

<!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">
    <title>刮刮乐</title>
    <style>
        *{
            margin: 0px;
            padding:0px;
            list-style-type: none;
        }
        .box{
            width: 100%;
            height: 55px;
            box-sizing: border-box;
            position: relative;
        }
        .result{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 36px;
            font-weight: bold;
        }
        #c1{
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="result"></div>
        <canvas id="c1" height="55px"></canvas>
    </div>
</body>
<script>
    var c1=document.querySelector("#c1");
    c1.width=window.screen.width;

    var result=document.querySelector(".result");
    var arr=["一等奖","二等奖","三等奖","幸福奖","谢谢惠顾"];
    //一等奖中奖机率 4%
    //二等奖中奖机率 10%
    //三等奖中奖机率 15%
    //幸运奖中奖机率 20%
    //其它的  谢谢惠顾51%;
    var temp=parseInt(Math.random()*100);
    var index;
    if(temp<51){
        index=4;
    }
    else if(temp<71){
        index=3;
    }
    else if(temp<86){
        index=2;
    }
    else if(temp<96){
        index=1;
    }
    else{
        index=0;
    }
    result.innerText=arr[index];

    //----------------随机数完成-----------------------
    var ctx = c1.getContext("2d");
    ctx.fillStyle="#ececec";
    ctx.fillRect(0,0,c1.width,c1.height);


    c1.addEventListener("touchstart",function(event){
        var e=event||window.event;
        if(e.changedTouches.length==1){
            //一根手指
            c1.addEventListener("touchmove",tm);
        }
    });

    function tm(event){
        var e=event||window.event;
        if(e.changedTouches.length==1){
            ctx.clearRect(e.changedTouches[0].clientX,e.changedTouches[0].clientY,10,10);
            e.preventDefault();  //阻止事件的默认行为
        }

    }

    c1.addEventListener("touchend",function(){
        c1.removeEventListener("touchmove",tm);
    })
</script>
</html>

效果图

image.png

0

评论区