首页 > 代码库 > 画布Canvas的使用方法

画布Canvas的使用方法

2024-10-14 17:32:38   203人阅读

 　　今天来个画布的讲解，对于画布你们了解多少呢。

　　Canvas他是使用 JavaScript 来绘制图像的，canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。

　　在画布的流程中大致是这样：

　　1、’先获取画布canvas；

　　2、创建2d画布；

　　3、起始点

　　4、过渡；

　　5、结尾点；

来看看我画的太极吧：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas width="300px" height="300px" style="border: 1px solid"></canvas>
<script>
    var ca=document.querySelector("canvas");
    var x=ca.getContext("2d");
    x.beginPath();
//    两个大圆相交
    x.fillStyle="white";
    x.arc(150,150,150,0,180*Math.PI/180,false);
    x.fill();
    x.stroke();
    x.closePath();

    x.beginPath();
    x.fillStyle="black";
    x.arc(150,150,150,0,180*Math.PI/180,true);
    x.fill();
    x.stroke();
    x.closePath();
    //两个小圆
    x.beginPath();
    x.restore(90*Math.PI/180);
    x.fillStyle="black";
    x.arc(76,150,75,0,180*Math.PI/180);
    x.fill();
    x.stroke();
    x.closePath();
    x.beginPath();
    x.restore(90*Math.PI/180);
    x.fillStyle="white";
    x.arc(76,150,20,0,360*Math.PI/180);
    x.fill();
    x.stroke();
    x.closePath();

    x.beginPath();
    x.fillStyle="white";
    x.arc(227,150,75,0,180*Math.PI/180,true);
    x.fill();
    x.stroke();
    x.closePath();
    x.beginPath();
    x.fillStyle="black";
    x.arc(227,150,20,0,360*Math.PI/180);
    x.fill();
    x.stroke();
    x.closePath();
</script>
</body>
</html>

 

画布Canvas的使用方法


联系
我们