本文主要是介绍canvas画太极,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
最近看了一部电影《太极2:英雄崛起》恰巧里面有我最喜欢的bady再加上上大学时也学过太极拳。索性就用canvas画个太极吧,供大家乐呵乐呵~
<canvas width="600" height="400" id="myCanvas"></canvas>
<script>var c=document.getElementById('myCanvas');var cxt= c.getContext('2d');cxt.beginPath();cxt.arc(200,200,100,0,2*Math.PI);cxt.stroke();cxt.beginPath();cxt.arc(200,200,100,Math.PI/2,3*Math.PI/2);cxt.fill();cxt.beginPath();cxt.fillStyle='white';cxt.arc(200,150,50,0,2*Math.PI,false);cxt.fill();cxt.beginPath();cxt.fillStyle='black';cxt.arc(200,250,50,0,2*Math.PI,false);cxt.fill();cxt.beginPath();cxt.fillStyle='white';cxt.arc(200,250,15,0,2*Math.PI,false);cxt.fill();cxt.beginPath();cxt.fillStyle='black';cxt.arc(200,150,15,0,2*Math.PI,false);cxt.fill();var timer = setInterval(fun,100);function fun() {cxt.rotate(10); }
</script>
这篇关于canvas画太极的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!