html 5 canvas 绘制太极demo
一个练习canvas的小案例。其中若有小问题,欢迎大神拍砖……^_*
代码效果预览地址:http://code.w3ctech.com/detail/2500
<div class="container">
<canvas id="myCanvas" width="400" height="400" ></canvas>
</div>
* {
padding:;
margin:;
} 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 5 canvas 绘制太极demo的更多相关文章
- HTML5 之Canvas 绘制时钟 Demo
<!DOCTYPE html> <html> <head> <title>Canvas 之 时钟 Demo</title> <!--简 ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- 使用Canvas绘制背景图
原文 http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...
- html5--5-14 阶段小练习:绘制太极图案
html5--5-14 阶段小练习:绘制太极图案 学习要点 运用前几节课的知识完成一个小练习 这个图案有多种不同的绘制方法,这里只做一个简单的演示,练习的时候可以自己思考一下,尝试其他的方法,或者对这 ...
- 如何写成高性能的代码(一):巧用Canvas绘制电子表格
一.什么是Canvas Canvas是HTML5的标签,是HTML5的一种新特性,又称画板.顾名思义,我们可以将其理解为一块画布,支持在上面绘制矩形.圆形等图形或logo等. 需要注意的是,与其他标签 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- 用canvas绘制折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas绘制经典折线图(一)
最终效果图如下: 实现步骤如下:注-引用了jQuery HTML代码 <!doctype html> <html lang="en"> <head&g ...
随机推荐
- python学习[二]
继续学习 http://www.cnblogs.com/vamei/archive/2012/09/13/2682778.html 词典的每个元素是键值对.元素没有顺序.dic = {'tom':11 ...
- 224. Basic Calculator
题目: Implement a basic calculator to evaluate a simple expression string. The expression string may c ...
- 简单的算法题, Find Minimum in Rotated Sorted Array 的Python实现。
简单的算法题, Find Minimum in Rotated Sorted Array 的Python实现. 题目: Suppose a sorted array is rotated at som ...
- POJ 2114 Boatherds【Tree,点分治】
求一棵树上是否存在路径长度为K的点对. POJ 1714求得是路径权值<=K的路径条数,这题只需要更改一下统计路径条数的函数即可,如果最终的路径条数大于零,则说明存在这样的路径. 刚开始我以为只 ...
- 撤销 git reset --hard HEAD~1
方法一: 1.先通过git reflog找到上一次的历史提交记录id,git如果没有特意设置,是会保存记录一段时间的(a few days or a month) 2.git reset --hard ...
- toad for sqlserver5.7
toad for sqlserver5.7 虽然SSMS很好很强大,不过有时候使用一些第三方工具可以使MSSQL DBA们更加的方便管理MSSQL toad for sqlserver5.7就是这样一 ...
- git push --no-thin
有时候我们执行 git push 将一个 new branch 推送到远程仓库的时候,会被远程仓库阻止. 可能是我们没有相应的权限吧.然而,我在 git push 的时候加上 --no-thin 参数 ...
- java怎样读取数据库表中字段的数据类型?
用DriverManager.getConnection()得到connect, 用connect.getMetaData()得到 DatabaseMetaData, 用 DatabaseMetaDa ...
- bzoj1934: [Shoi2007]Vote 善意的投票
最大流..建图方式都是玄学啊.. //Dinic是O(n2m)的. #include<cstdio> #include<cstring> #include<cctype& ...
- Java知识点:javac命令
javac命令初窥 注:以下红色标记的参数在下文中有所讲解. 用法: javac <options> <source files> 其中, 可能的选项包括: -g ...