canvas中的方块

最新推荐文章于 2023-07-14 14:09:24 发布

逆魂夜

最新推荐文章于 2023-07-14 14:09:24 发布

阅读量336

点赞数

分类专栏： css3+html5

本文链接：https://blog.csdn.net/qq_44388393/article/details/88250971

版权

css3+html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="600px" height="400px" style="border: 1px solid #eeeeee"></canvas>
<script>
    var ctx = document.querySelector('canvas').getContext('2d');
    
    // - rect(x,y,w,h) 没有独立路径
    ctx.beginPath()
    ctx.rect(0,300,50,50)
    ctx.fill()
    // - strokeRect(x,y,w,h) 有独立路径，不影响别的绘制
    ctx.beginPath()
    ctx.strokeRect(100,300,50,50)
    ctx.fill()
    // - fillRect(x,y,w,h) 有独立路径，不影响别的绘制
    ctx.beginPath()
    ctx.fillRect(200,300,50,50)
    ctx.fill()
    // - clearRect(x,y,w,h) 擦除矩形区域
    ctx.beginPath()
    ctx.fillRect(300,300,100,100)
    ctx.clearRect(325,300,50,50)
    ctx.fill()
    //线性渐变
    ctx.beginPath()
    var grd=ctx.createLinearGradient(0,0,200,0)
    grd.addColorStop(0,'red')
    grd.addColorStop(0.5,'gold')
    grd.addColorStop(1,'cyan')
    ctx.fillStyle=grd;
    ctx.fillRect(0,0,200,200)
    
    //径向渐变
    ctx.beginPath()
    var grd=ctx.createRadialGradient(400,50,1,450,60,80);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"gold");
    ctx.fillStyle=grd;
    ctx.fillRect(350,25,150,100);




</script>
</body>
</html>