html5 画太极图,canvas基础画太极图(娱乐~)

太极

.canvas{

animation: scroll1 3s linear infinite;

}

@keyframes scroll1{

0%{

transform: rotateZ(0deg);

}

100%{

transform: rotateZ(720deg);

}

var myCanvas = document.getElementById('myCanvas1');

var g = myCanvas.getContext('2d');

// 下半圆

g.beginPath();

g.strokeStyle = 'black';

g.arc(250,250,250,0,Math.PI,false);

// g.closePath();

g.fillStyle = 'black';

g.fill();

g.stroke();

// 上半圆

g.beginPath();

g.strokeStyle = 'black';

g.arc(250,250,250,0,Math.PI,true);

// g.closePath();

g.stroke();

// 右半圆

g.beginPath();

g.strokeStyle = 'white';

g.arc(375,250,125,0,Math.PI,true);

// g.closePath();

g.fillStyle = 'black';

g.fill();

g.stroke();

// 左半圆

g.beginPath();

g.strokeStyle = 'white';

g.arc(125,250,125,Math.PI,0,true);

// g.closePath();

g.fillStyle = 'white';

g.fill();

g.stroke();

// 上小圆

g.beginPath();

g.strokeStyle = 'black';

g.arc(375,225,25,0,2*Math.PI,true);

// g.closePath();

g.fillStyle = 'white'

g.fill();

g.stroke();

// 下小圆

g.beginPath();

g.strokeStyle = 'black';

g.arc(125,275,25,0,2*Math.PI,true);

// g.closePath();

g.fillStyle = 'black';

g.fill();

g.stroke();

html5 画太极图,canvas基础画太极图(娱乐~)相关推荐

HTML菊花图案绘制,用HTML5中的canvas元素画菊花
用html5中的canvas画出的三种菊花,书上看到的例子,拿来当联系玩. 使用Canvas元素绘制美丽的花朵 var context; var A,n; function btn_onclick() ...
html a标签指定区域,第四讲：使用html5中的canvas标签画出一个球在指定区域内的运动...
小球在一个区域运动 var canvas = document.getElementById('mc'); var cxt = canvas.getContext('2d'); //定义一个小球 va ...
html5平抛,第五讲：使用html5中的canvas动态画出物理学上平抛运动
平抛运动 var canvas = document.getElementById('mc'); var cxt = canvas.getContext('2d'); //定义一个小球 var bal ...
html5 canvas 画阿迪达斯logo,HTML5 Canvas笔记——HTML5 Canvas绘图绘制太极图
HTML5 Canvas绘图绘制太极图太极图 * { padding: 0; margin: 0; } body { } #myCanvas { background-color: #eee; } ...
python turtle画椭圆-python turtle 绘制太极图的实例
效果如下所示: # -*- coding: utf-8 -*- import turtle # 绘制太极图函数 def draw_TJT(R): turtle.screensize(800, 600, ...
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
本文转自:http://www.jb51.net/html5/70317.html 在canvas画线条这篇文章中,我讲了画直线的方法,按理这篇画曲线的文章早该发了,但由于canvas画曲线比较特殊, ...
html5两条直线,Html5新特性用canvas标签画多条直线附效果截图
下面例子为用canvas标签画多条直线复制代码代码如下: index_three 您的浏览器不支持canvas标签. //获取Canvas对象(画布) var canvas = document.g ...
html页面画虚线,HTML5中canvas怎么画虚线
HTML5中canvas如何画虚线虚线也可以看成是一段段的实线组成的,而实线是利用context.moveTo(x,y);context.lineTo(x2,y2);context.stroke() ...
php 画直线,html5 Canvas实现画直线与设置线条的样式
这篇文章主要介绍了关于html5 Canvas实现画直线与设置线条的样式,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形. ...

html5 画太极图,canvas基础画太极图(娱乐~)

html5 画太极图,canvas基础画太极图(娱乐~)相关推荐

最新文章

热门文章