canvas标签

最新推荐文章于 2024-04-14 19:33:13 发布

Forever_Young_1314

最新推荐文章于 2024-04-14 19:33:13 发布

阅读量256

点赞数

本文链接：https://blog.csdn.net/Forever_Young_1314/article/details/44084403

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<center>
<canvas height="500" width="500" style="background:#9dffd7" id="canvas">
    sorry!
</canvas>
    </center>
<script>
    var Canvas=document.getElementById('canvas');
    var cxt=canvas.getContext('2d');
    //画圆
    cxt.arc(40,40,30,0,360);
    cxt.stroke();
    cxt.closePath();
    //画直线
    cxt.beginPath();
    cxt.moveTo(90,40);
    cxt.lineTo(150,40);
    cxt.stroke();
    cxt.closePath();
    //画矩形
    cxt.beginPath();
    cxt.rect(180,10,60,60);
    cxt.stroke();
    cxt.closePath();

    cxt.fillStyle="rgb(255,0,0)";
    cxt.fillRect(270,10,60,60);

    cxt.beginPath();
    cxt.strokeStyle="rgb(255,0,0)";
    cxt.strokeRect(360,10,60,60);
    cxt.closePath();
    //设置文字
    cxt.strokeStyle="green";
    cxt.fillStyle="purple";
    cxt.font="40px 黑体";
    cxt.fillText("hello",10,110);
    cxt.strokeText("hello",150,110);
    cxt.fill();
    //入图片导
    var img=new Image();
    img.src="banner.png";
    cxt.drawImage(img,10,130,300,150);
    //画三角形
    cxt.beginPath();
    cxt.lineWidth="4";
    cxt.moveTo(360,130);
    cxt.lineTo(400,200);
    cxt.lineTo(330,200);
    cxt.closePath();
    cxt.stroke();
    cxt.fill();

    //旋转线
    cxt.save();   //保存原图
      cxt.translate(0,290);
      cxt.rotate(10*Math.PI/180);
      cxt.lineWidth="4";
      cxt.beginPath();
      cxt.moveTo(0,0);
      cxt.lineTo(280,0);
      cxt.stroke();
      cxt.closePath();
    cxt.restore();  //重新画旋转后的图

    //旋转图片
    cxt.save();   //保存原图
    cxt.translate(10,130);
    cxt.rotate(10*Math.PI/180);
    var img=new Image();     //google不支持
    img.src="banner.png";
    cxt.drawImage(img,0,0,300,150);
    cxt.restore();  //重新画旋转后的图

    //设置渐变图
    cxt.beginPath();
    cxt.arc(60,400,40,0,360);
    cxt.closePath();
    var suncolor=cxt.createRadialGradient(60,400,0,60,400,40);
    suncolor.addColorStop(0,"yellow");
    suncolor.addColorStop(1,"red");
    cxt.fillStyle=suncolor;
    cxt.fill();

    cxt.beginPath();
    cxt.arc(150,400,40,0,360);
    cxt.closePath();
    var suncolor=cxt.createRadialGradient(165,400,10,150,400,30);
    suncolor.addColorStop(0,"yellow");
    suncolor.addColorStop(1,"red");
    cxt.fillStyle=suncolor;
    cxt.fill();
</script>
</body>
</html>

//结果截图

Forever_Young_1314

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas标签

html>html>head lang="en"> meta charset="UTF-8"> title>title>head>body>center>canvas height="500" width="500" style="background:#9dffd7" id="canvas"> sorry!canvas>
复制链接

扫一扫