HTML5之Canvas绘图——半圆与圆弧的不同画法
2017-05-13 23:45
691 查看
昨天写的博客中,写到了HTML5中使用Canvas画圆的方法,昨晚试了一下画一个笑脸,其实挺简单的,就是两个实心圆做眼睛,一个半圆弧做嘴,这个简单的笑脸就完成了,但是在做嘴的时候开始出现了问题:
这几天正在看一本书——陶国荣的《HTML5实战》,这本书里的一个笑脸实例让我顿悟,方法更是简单的让我汗颜啊~~~
先看效果,再上代码
OK啦,这样就可以实现我那个的笑脸的嘴了~~
<!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啦,这样就可以实现我那个的笑脸的嘴了~~
相关文章推荐
- HTML5之Canvas绘图——半圆与圆弧的不同画法
- 【一天一个canvas】半圆与圆弧的不同画法(十)
- Html5 Canvas 系列_绘图三(H5 绘制圆弧)
- HTML5 移动开发 -- Canvas 绘图 9.2 三角形路径绘制, 圆, 圆弧,二元三元抛物线, 渐变
- HTML5 canvas 在线画笔绘图工具(二)
- html5 canvas绘图-刻度仪表盘的绘制
- html5 canvas常用api总结(二)--绘图API
- HTML5 Canvas绘图与动画学习59例
- HTML5 canvas绘图基本使用方法
- html5 canvas学习--启用不同的线型
- Html5 Canvas开发之鼠标绘图和方块移动
- Html5 Canvas笔记(2)-Canvas绘图
- Html5 Canvas 系列_绘图二
- HTML5之Canvas绘图——图像切割函数clip
- 创建HTML5 LOGO,Canvas绘图
- 6.HTML5 Canvas 绘图-2
- HTML5_03之Canvas绘图
- HTML5绘图基础_01_Canvas的使用
- JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
- JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例