canvas一周一练 -- canvas绘制太极图(6)
2024-09-25 00:49:03
运行效果:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="drawing" width="" height="">A drawing of someing!</canvas>
<script type="text/javascript">
var drawing = document.getElementById('drawing');
if(drawing.getContext) {
//绘制太极图
var context = drawing.getContext('2d');
context.fillStyle = 'Lavender';
context.fillRect(, , , );
//画外面的两个大半圆
context.fillStyle = '#000';
context.beginPath();
context.arc(, , , 0.5*Math.PI, 1.5*Math.PI, false);
context.closePath();
context.fill();
context.fillStyle = '#fff';
context.beginPath();
context.arc(, , , 1.5*Math.PI, 0.5*Math.PI, false);
context.closePath();
context.fill();
//画里面的两个小半圆
context.beginPath();
context.arc(, , , 0.5*Math.PI, 1.5*Math.PI, false);
context.closePath();
context.fill();
context.fillStyle = '#000';
context.beginPath();
context.arc(, , , 1.5*Math.PI, 0.5*Math.PI, false);
context.closePath();
context.fill();
//画里面的两个小圆
context.beginPath();
context.arc(, , , , *Math.PI, false);
context.closePath();
context.fill();
context.fillStyle = '#fff';
context.beginPath();
context.arc(, , , , *Math.PI, false);
context.closePath();
context.fill();
} </script>
</body>
</html>
最新文章
- 手机游戏渠道SDK接入工具项目分享(一)缘起
- UDP网络通信OSC 协议
- 同源策略和JSONP(概念性)
- Codeforces Round #113 (Div. 2)
- Node 出现 uncaughtException 之后的优雅退出方案
- Linux公社资料库地址
- LCA与RMQ
- wcf教程
- 使用自定义 jQuery 插件的一个选项卡Demo
- Autofac 入门
- C++ 顺序容器 vector list deque 之比较
- Victor 串口 VCL 控件 - 简单实用, 功能强大的 C++ Builder 串口控件!
- JAVA – 虚函数、抽象函数、抽象类、接口
- Spring - Bean的概念及其基础配置
- 通过 JS 判断页面是否有滚动条的简单方法
- 报错utf-8错误
- Hdoj 2149.Public Sale 题解
- linux 安装中文支持
- Java面试题考点全面总结
- 响应式 和 移动 web