html 5 canvas 绘制太极demo
2016-02-02 23:25
609 查看
一个练习canvas的小案例。其中若有小问题,欢迎大神拍砖……^_*
代码效果预览地址:http://code.w3ctech.com/detail/2500。
代码效果预览地址:http://code.w3ctech.com/detail/2500。
<div class="container"> <canvas id="myCanvas" width="400" height="400" ></canvas> </div>
* { padding: 0; margin: 0; } body { background-color: #d5d3d4; } .container { width: 500px; height: 500px; position: relative; top: 80px; left: 50%; transform: translateX(-50%); background-color: #fff; border-radius: 10px; box-shadow: 0 0 5px #c2bfbf; } #myCanvas{ border:1px solid #000; position:relative; top: 50px; left: 50px; transform:translate(-50%,-50%); border-radius:50%; animation: myfirst 30s linear infinite; } @keyframes myfirst { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} }
window.onload = function () { var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d"); ctx.beginPath(); ctx.arc(200, 100, 100, -0.5 * Math.PI, 0.5 * Math.PI, false); ctx.arc(200, 300, 100, 1.5 * Math.PI, 0.5 * Math.PI, true); ctx.arc(200, 200, 200, 0.5 * Math.PI, 1.5 * Math.PI, false); ctx.closePath(); ctx.fillStyle = "black"; ctx.fill(); ctx.beginPath(); ctx.arc(200, 100, 25, 0 * Math.PI, 2 * Math.PI, false); ctx.fillStyle = "white"; ctx.fill(); ctx.beginPath(); ctx.arc(200, 300, 25, 0 * Math.PI, 2 * Math.PI, false); ctx.fillStyle = "black"; ctx.fill(); }
相关文章推荐
- 个人笔记 html 05 div隐藏后仍占用空间
- 个人笔记 html 04 提交表单与跳转页面冲突时
- 自己定义html中a标签的title提示tooltip
- HTML-03表单的创建
- html 空白汉字占位符 
- htmlcleaner使用及xpath语法
- html转成pdf的方法
- HTML转义字符表的使用
- HTML string对象的操作
- HTML提交与点击的区别
- html开发规范
- html记录(一)
- 技术笔记:Indy的TIdSMTP改造,解决发送Html和主题截断问题
- html基础书写布局介绍
- iframe内部嵌入html页面并且能够跳转
- Html 基础教程目录
- html 复习
- html为什么需要采用表单提交数据
- destoon中input框为什么需要隐藏?
- 比较HTML元素和Native组件的区别