Html5 Canvas 系列_绘图一

最新推荐文章于 2017-12-21 09:07:16 发布

Java_攻城狮

最新推荐文章于 2017-12-21 09:07:16 发布

阅读量410

点赞数 1

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

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

版权

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
	function init_canvas(canvas_id){		
		var canvas = document.getElementById("canvas");
		canvas.width = 800;
		canvas.height = 800;
		return canvas.getContext("2d");
	}

	//	绘制线条公用方法
	//	context	Canvas	容器	x y 起点	line_array 线条数组	line_width 线条精细	stroke_style 填充颜色
	//	line_width line_width 为空即用默认值
	function pub_ph(context, x_y, line_array, line_width, stroke_style){
		context.moveTo(x_y[0], x_y[1]);
		//	循环绘制线条
		$.each(line_array, function(i, v){       
		　　//在第一次循环中，this代表一个一维数组，将这个一维数组再次送到each函数中，遍历里面的一维函数
			context.lineTo(v[0], v[1]);	  
		});
		//	设置填充颜色
		if(stroke_style != null)
			context.strokeStyle = stroke_style;
		//	设置线条颜色
		if(line_width != null)
			context.lineWidth = line_width;
		context.stroke();
	}

	//		|\
	//	----  \
	//	----| /
	//		|/
	function ph1(context){
		var line_array = [[100, 350], [500, 350], [500, 350] , [500, 200], [700, 400], [500, 600], [500, 450], [100, 450]];
		pub_ph(context, [[100, 350]], line_array, 20, "#582");
	}

	//	\ \ \ 
	//	/ /	/
	function ph2(context){
		context.beginPath();
		context.moveTo(100, 200);
		context.lineTo(300, 400);
		context.lineTo(100, 600);
		context.strokeStyle = "red";
		context.stroke();

		context.beginPath();
		context.moveTo(300, 200);
		context.lineTo(500, 400);
		context.lineTo(300, 600);
		context.strokeStyle = "green";
		context.stroke();
			
		context.beginPath();
		context.moveTo(500, 200);
		context.lineTo(700, 400);
		context.lineTo(500, 600);
		context.strokeStyle = "blue";
		context.stroke();
	}

	//		|\
	//	|---  \
	//	|---| /
	//		|/			
	function ph3(context){
		context.moveTo(100, 350);

		context.lineTo(500, 350);
		context.lineTo(500, 350);
		context.lineTo(500, 200);
		context.lineTo(700, 400);
		context.lineTo(500, 600);
		context.lineTo(500, 450);
		context.lineTo(100, 450);
		context.lineTo(100, 350);

		context.closePath();

		context.lineWidth = "10";
		context.strokeStyle = "#c00";
		context.fillStyle = "#ff0"
		//Canvas 基于状态绘制，设置完绘制属性进行绘制操作
		context.fill();
		context.stroke();
	}	

	//   _____
	//  |	  |
	//  |_____|
	//
	function ph4(context){		
		context.lineWidth = 5;
		context.fillStyle = "#00f";
		context.strokeStyle = "#f3c";

		context.fillRect(200, 200, 400, 400);
		context.strokeRect(200, 200, 400, 400);
	}

	//	五角星
	function ph5(context){
		context.beginPath();
		for(var i = 0; i < 5; i++){
			var x = Math.cos((18 + i * 72 - 30) / 180 * Math.PI) * 300 + 400;
			var y = -Math.sin((18 + i * 72 - 30) / 180 * Math.PI) * 300 + 400;
			context.lineTo(x, y);

			x = Math.cos((54 + i * 72 - 30) / 180 * Math.PI) * 150 + 400;
			y = -Math.sin((54 + i * 72 -30) / 180 * Math.PI) * 150 + 400;
			context.lineTo(x, y);

		}
		context.closePath();

		context.strokeStyle = "#f00";
		context.fillStyle = "#f00";
		context.lineWidth = 10;
		context.fill();
		context.stroke();
	}

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

最近在学习Html5 ，从最基础的 Canvas 绘图开始学习，分享一下二天下来的成果，效果图：