Html5 Canvas 系列_绘图三(H5 绘制圆弧)

最新推荐文章于 2024-04-14 14:09:07 发布

Java_攻城狮

最新推荐文章于 2024-04-14 14:09:07 发布

阅读量1.8k

点赞数 1

分类专栏： Web 前端 html5 文章标签： html5 canvas

本文链接：https://blog.csdn.net/u014266877/article/details/54889842

版权

Web 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

前端

16 篇文章 0 订阅

订阅专栏

html5

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title> Canvas 绘图</title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="cloud">
  <meta name="Keywords" content="H5 Canvas 绘图">
  <meta name="Description" content="使用Html5 Canvas 绘制图形">
 </head>
	<style type="text/css">
		#canvas{
			border: 1px solid #000;
			display:block;
			margin: 50px auto;
		}
	</style>
 <body>
	<canvas id="canvas">
			您的浏览器不支持Canvas
	</canvas>
 </body>

<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>  
<script type="text/javascript">
	//	得到 canvas 容器
	var canvas = document.getElementById("canvas");
	
	// 初始化Canvas
	function init_canvas(canvas_id){		
		canvas.width = 800;
		canvas.height = 800;
		return canvas.getContext("2d");
	}

	//	绘制圆弧
	function ph1(context){
		for(var i = 0 ; i < 10 ; i++){
			context.beginPath();
			// x座标, y座标, 半径, 开始角度, 结束角度, 是否是逆时间绘制
			var rote = Math.random();
			context.arc(50 + i * 100, 350 + rote, 40 + rote, 0, 2 * Math.PI * (i + 1) / 10, (i % 2));
			context.stroke();
		}

		for(var i = 10 ; i >= 0 ; i--){
			context.beginPath();
			// x座标, y座标, 半径, 开始角度, 结束角度, 是否是逆时间绘制
			var rote = Math.random();
			context.arc(50 + i * 100, 450 + rote, 40 + rote, 0, 2 * Math.PI * (i + 1) / 10, (i % 3));
			context.fill();
		}
	}

	$(function(){
		var context = init_canvas("canvas");
		ph1(context);
	});
</script>
</html>