canvas的其他基础用法

最新推荐文章于 2023-07-05 19:11:54 发布

岁月如歌_

最新推荐文章于 2023-07-05 19:11:54 发布

阅读量134

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/namechenfl/article/details/81409982

版权

canvas 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>Document</title>
    <style>
     *{
         padding: 0;
         margin: 0;
     }
     #cvs{
         border: 1px solid #ddd;
     }
    </style>
</head>
<body>
    <canvas id="cvs" width="800" height="600"></canvas>
</body>
<script>
    var cvs =document.getElementById("cvs")
    var ctx=cvs.getContext("2d");
// 新图
    // ctx.beginPath();
    // ctx.arc(150,150,100,0,2*Math.PI,false);
    // ctx.fillStyle="red";
    // ctx.fill();
    // ctx.closePath();
    //限制画布显示大小
   //ctx.clip()
    // ctx.globalCompositeOperation="lighter"
// 旧图
    // ctx.beginPath();
    // ctx.arc(200,150,100,0,2*Math.PI,false);
    // ctx.fillStyle="blue";
    // ctx.fill()
    // ctx.closePath();
   
    // 图片
    // ctx.beginPath();
    // var img=new Image();
    // img.src="./images/1.jpg";
    // img.onload=function(){
    //     ctx.drawImage(img,0,30)
    //     var pat=ctx.createPattern(img,"repeat-x");
    //     ctx.fillStyle=pat;
    //     ctx.fillRect(0,0,500,300);

    //     var url=cvs.toDataURL("image/jpeg",1)
    //     var img2=new Image();
    //     img2.src=url;
    //     document.body.appendChild(img2)
    //     var data=ctx.getImageData(50,60,100,100)
    //              ctx.putImageData(data,450,450)
    // }
//    ctx.beginPath();
//    ctx.fillStyle="blue";
//    ctx.fillRect(40,80,200,200);
//    var data=ctx.getImageData(50,60,100,100)
//      ctx.putImageData(data,450,450)
//    ctx.closePath()

    //盒阴影
    // ctx.beginPath();
    // ctx.shadowColor="red";
    // ctx.shadowBlur=20;
    // ctx.shadowOffsetX=10;
    // ctx.shadowOffsetY=10;
    // ctx.arc(150,150,100,2*Math.PI,false);
    // ctx.fillStyle="yellow";
    // ctx.fill();
   //字阴影
    // ctx.closePath();
    // ctx.beginPath();
    // ctx.shadowColor="red";
    // ctx.shadowBlur=10;
    // ctx.shadowOffsetX=5;
    // ctx.shadowOffsetY=5;
    // ctx.font="60px 微软雅黑";
    // // ctx.fillText("潘栋",100,100);
    // ctx.strokeText("潘栋",100,100);
    
    //缩放 旋转 
    // ctx.closePath()
    ctx.beginPath();
    // ctx.scale(2,2)
    // ctx.rotate(30*Math.PI/180)
    ctx.translate(100,100)
    ctx.fillStyle="red";
    //保存状态
    ctx.save()
    ctx.fillStyle="blue";
    //取出状态
    ctx.restore()
    ctx.fillRect(100,100,100,100);
    ctx.closePath()

</script>
</html>

岁月如歌_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas的其他基础用法

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫