canvas 绘制八卦图
来源:互联网 发布:gopro软件中文版 编辑:程序博客网 时间:2024/05/23 00:20
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas绘制八卦图</title>
</head>
<body>
<center>
<canvas id="canvas" width="600" height="500"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
//1.先绘制一个完整的空心圆
context.beginPath();
context.arc(250,250,200,0,Math.PI*2);
context.stroke();
//2.绘制半黑半白 默认为黑色
context.beginPath();
context.arc(250,250,200,Math.PI*3/2,Math.PI/2,true);
context.fill();
//3.绘制一黑一白两个半圆
context.fillStyle="white";
context.beginPath();
context.arc(250,150,100,0,Math.PI*2);
context.fill();
context.fillStyle="black";
context.beginPath();
context.arc(250,350,100,0,Math.PI*2);
context.fill();
//4.绘制两个小圆
context.fillStyle="black";
context.beginPath();
context.arc(250,150,30,0,Math.PI*2);
context.fill();
context.fillStyle="white";
context.beginPath();
context.arc(250,350,30,0,Math.PI*2);
context.fill();
</script>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>canvas绘制八卦图</title>
</head>
<body>
<center>
<canvas id="canvas" width="600" height="500"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
//1.先绘制一个完整的空心圆
context.beginPath();
context.arc(250,250,200,0,Math.PI*2);
context.stroke();
//2.绘制半黑半白 默认为黑色
context.beginPath();
context.arc(250,250,200,Math.PI*3/2,Math.PI/2,true);
context.fill();
//3.绘制一黑一白两个半圆
context.fillStyle="white";
context.beginPath();
context.arc(250,150,100,0,Math.PI*2);
context.fill();
context.fillStyle="black";
context.beginPath();
context.arc(250,350,100,0,Math.PI*2);
context.fill();
//4.绘制两个小圆
context.fillStyle="black";
context.beginPath();
context.arc(250,150,30,0,Math.PI*2);
context.fill();
context.fillStyle="white";
context.beginPath();
context.arc(250,350,30,0,Math.PI*2);
context.fill();
</script>
</center>
</body>
</html>
阅读全文
0 0
- canvas绘制八卦图
- canvas 绘制八卦图
- canvas八卦图1
- canvas八卦图2
- 利用形状图层绘制八卦图
- css3绘制八卦图及动画效果
- Html5 Canvas 系列_绘图三(H5 ,CSS3 动态八卦图)
- canvas绘制
- Canvas绘制
- 使用OpenGL Midpoint Circle 算法来绘制一个八卦图
- Canvas---Canvas绘制钟表,仪表盘
- View.onDraw(Canvas canvas)绘制
- 【Html5】canvas绘制圆形
- html5 canvas 绘制钟表
- Android Canvas 图形绘制
- HTML Canvas 绘制五角星
- canvas 绘制图形1
- canvas 绘制图形2
- 【codevs 1081】线段树练习 2
- 3D自动旋转图(HTML5)
- @RequestMapping请求方式发生冲突时候的情况
- 微积分小糊涂,国庆节大快乐!
- Struts2中ActionContext、 ServletActionContext详解
- canvas 绘制八卦图
- 个人Blog开发学习笔记
- AtCoder Grand Contest 001 C
- Linux root 用户下 selenium 运行chrome --no-sandbox的问题的解决
- opcode 查询,opcode 汇总
- bzoj1880: [Sdoi2009]Elaxia的路线
- 软件构造 课堂笔记6
- Spring事务管理总结
- MD5加密算法