HTML5之Canvas绘图——半圆与圆弧的不同画法
昨天写的博客中,写到了HTML5中使用Canvas画圆的方法,昨晚试了一下画一个笑脸,其实挺简单的,就是两个实心圆做眼睛,一个半圆弧做嘴,这个简单的笑脸就完成了,但是在做嘴的时候开始出现了问题:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas</title> </head> <style type="text/css"> body{margin:20px auto; padding:0; width:800px; } canvas{border:dashed 2px #CCC} </style> <script type="text/javascript"> function $$(id){ return document.getElementById(id); } function pageLoad(){ var can = $$('can'); var cans = can.getContext('2d'); cans.beginPath(); cans.arc(400,300,200,0,Math.PI,1); cans.closePath(); cans.strokeStyle = 'red'; cans.lineWidth = 10; cans.stroke(); } </script> <body onload="pageLoad();"> <canvas id="can" width="800px" height="600px"></canvas> </body> </html>
这几天正在看一本书——陶国荣的《HTML5实战》,这本书里的一个笑脸实例让我顿悟,方法更是简单的让我汗颜啊~~~
先看效果,再上代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Canvas</title> </head> <style type="text/css"> body{margin:20px auto; padding:0; width:800px; } canvas{border:dashed 2px #CCC} </style> <script type="text/javascript"> function $$(id){ return document.getElementById(id); } function pageLoad(){ var can = $$('can'); var cans = can.getContext('2d'); cans.beginPath(); cans.arc(400,300,200,0,Math.PI,1); cans.strokeStyle = 'red'; cans.lineWidth = 10; cans.stroke(); cans.closePath(); } </script> <body onload="pageLoad();"> <canvas id="can" width="800px" height="600px"></canvas> </body> </html>
OK啦,这样就可以实现我那个的笑脸的嘴了~~