`
lib
  • 浏览: 133656 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

Canvas学习笔记(六)--绘图（综合使用）

web前端html5canvas 
阅读更多

首先看看需要完成的图像：

 

代码如下：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  	<style type="text/css">
		.wraper {
			position: relative;
			border: 1px solid orange;
		}
  	</style>
	<script type="text/javascript">
		function draw(){
			var can = document.getElementById('test');
			if(can.getContext){
				var cxt = can.getContext('2d');

				//绘制左侧黑色区域
				cxt.beginPath();
				cxt.arc(100,100,80,Math.PI*0.5,Math.PI*1.5,false);
				cxt.bezierCurveTo(20,100,180,100,100,180);
				cxt.fill();

				//绘制右侧白色区域
				cxt9.beginPath();
				cxt.arc(100,100,80,Math.PI*0.5,Math.PI*1.5,true);
				cxt.stroke();

				//绘制右侧黑色圆圈
				cxt.beginPath();
				cxt.moveTo(120,60);
				cxt.arc(120,60,15,0,Math.PI*2,true);
				cxt.fill();

				//绘制左侧白色圆圈
				cxt.fillStyle = "rgba(255,255,255,1)";
				cxt.beginPath();
				cxt.moveTo(80,140);
				cxt.arc(80,140,15,0,Math.PI*2,true);
				cxt.fill();

			}
		}
	</script>
  </head>	
  
  <body onload="draw();">
	
	<canvas id="test" width="200px" height="200px" class="wraper"></canvas>

  </body>
</html>
 

 

 

 

 

  • 大小: 6 KB
分享到：
| Canvas学习笔记(五)--绘图（贝赛尔曲线）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics