HTML5利用canvas绘制太极图案

最新推荐文章于 2024-04-20 16:29:18 发布

zhengzixiang666

最新推荐文章于 2024-04-20 16:29:18 发布

阅读量8.5k

点赞数 1

本文链接：https://blog.csdn.net/zhengzixiang666/article/details/56674156

版权

代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
<body>

</canvas>

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
//绘制左侧的白色半圆直径都是150
cxt.fillStyle="#FFFFFF";
cxt.beginPath();
cxt.arc(300,200,150,1.5*Math.PI,Math.PI/2,false);
cxt.closePath();
cxt.fill();
//绘制右侧的黑色半圆
cxt.fillStyle="#000000";
cxt.beginPath();
cxt.arc(300,200,150,Math.PI/2,1.5*Math.PI,false);
cxt.closePath();
cxt.fill();
//绘制下面的黑色圆
cxt.fillStyle="#000000";
cxt.beginPath();
cxt.arc(300,275,75,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
//绘制上面的白色圆
cxt.fillStyle="#FFFFFF";
cxt.beginPath();
cxt.arc(300,125,75,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
//绘制两个小圆
cxt.fillStyle="FFFFFF";
cxt.beginPath();
cxt.arc(300,275,10,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
//绘制黑色小圆
cxt.fillStyle="#000";
cxt.beginPath();
cxt.arc(300,125,10,0,2*Math.PI,false);
cxt.closePath();
cxt.fill();
</script>

</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhengzixiang666

关注关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
HTML5利用canvas绘制太极图案

代码如下： pageEncoding="utf-8"%>var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");//绘制左侧的白色半圆直径都是150cxt.fillStyle="#FFFFFF";cxt.beginPath();cxt.arc(300,
复制链接

扫一扫