canvas基础实例

canvas是一张画布

值	含义
lineWidth	线的宽度
fillStyle	填充颜色
.moveTo(100, 200)	x点的坐标，y的坐标
butt	默认。向线条的每个末端添加平直的边缘。
round	向线条的每个末端添加圆形线帽。
square	向线条的每个末端添加正方形线帽。

画不同拐角的箭头
html代码如下：

<canvas id="mycanvas" width="600px" height="600px" style="border:1px solid #000000 ;"></canvas>

js代码：

<script type="text/javascript">
		var canvas = document.getElementById("mycanvas");   

        var ctx = canvas.getContext("2d");   
		ctx.beginPath();
		ctx.moveTo(100, 200);
		ctx.lineTo(200, 120);
		ctx.lineTo(300, 200);
		ctx.strokeStyle = 'red';
		ctx.lineWidth = 20;
		ctx.lineCap = 'butt';
		ctx.lineJoin = 'miter';
		ctx.stroke();

		ctx.beginPath();
		ctx.moveTo(100, 300);
		ctx.lineTo(200, 220);
		ctx.lineTo(300, 300);
		ctx.strokeStyle = 'green';
		ctx.lineWidth = 30;
		ctx.lineCap = 'square';
		ctx.lineJoin = 'level';
		ctx.stroke();

		ctx.beginPath();
		ctx.moveTo(100, 400);
		ctx.lineTo(200, 320);
		ctx.lineTo(300, 400);
		ctx.strokeStyle = 'green';
		ctx.lineWidth = 30;
		ctx.lineCap = 'round';
		ctx.lineJoin = 'round';
		ctx.stroke();
	</script>

js绘制虚线

var canvas = document.getElementById("mycanvas");   
    var ctx = canvas.getContext("2d");   
    ctx.Drawdashed();
function Drawdashed(){
　　cxt.lineWidth = 4;
　　cxt.strokeStyle = 'green';
　　cxt.beginPath();
　　//绘制虚线，线段的宽度和空隙的宽度
　　cxt.setLineDash([5, 15]);
　　cxt.moveTo(20, 20);
　　cxt.lineTo(400, 20);
　　cxt.stroke();
}

绘制渐变矩形：

var canvas = document.getElementById("canvas1");
			var ctx = canvas.getContext("2d");
			ctx.lineWidth = 100;
			for(var i = 0; i < 255; i++) {
				每次循环路径不同，rgb(0-255) 渐变
				ctx.beginPath();
				ctx.moveTo(90 + i, 100);
				ctx.lineTo(90 + i - 1, 100);
				ctx.strokeStyle = 'rgb(' + i + ',' + i + ',' + i + ')';
				ctx.stroke();
			}

画网格线
画每行的宽/多少格，每行的高/多少格，绘制点的坐标和线段的长度绘制

var canvas = document.getElementById(“canvas”);

		var ctx = canvas.getContext("2d");

		var grid = 100;
		var canvasHeight = ctx.canvas.height;
		var canvasWidth = ctx.canvas.width;

		var xlineTotal = Math.floor(canvasHeight / grid);
		for(var i = 0; i <= xlineTotal; i++) {
			ctx.beginPath();
			ctx.moveTo(0, i * grid);
			ctx.lineTo(canvasWidth, i * grid);
			ctx.stroke();
		}

		var ylineTotal = Math.floor(canvasHeight / grid);
		for(var i = 0; i <= ylineTotal; i++) {
			ctx.beginPath();
			ctx.moveTo(i * grid, 0);
			ctx.lineTo(i * grid, canvasHeight);
			ctx.stroke();
		}

var canvas = document.getElementById(“canvas2”);

		var ctx = canvas.getContext("2d");
		var w = ctx.canvas.width;
		var h = ctx.canvas.height;
		var num = 6;
		var angle = Math.PI * 2 / num;

		var x0 = w / 2;
		var y0 = h / 2;

		var getColor = function() {
			//去掉颜色一样的，重复的。 
			var r = Math.floor(Math.random() * 256);
			var g = Math.floor(Math.random() * 256);
			var b = Math.floor(Math.random() * 256);
			return 'rgb(' + r + ',' + g + ',' + b + ')';
		}

		//			var startAngle = 0;
		for(var i = 0; i < num; i++) {
			var startAngle = i * angle;
			var endAngle = (i + 1) * angle;
			ctx.beginPath();
			ctx.moveTo(x0, y0);
			ctx.arc(x0, y0, 150, startAngle, endAngle);
			ctx.fillStyle = getColor();
			ctx.fill();

		}
	</script>-->

	<script type="text/javascript">
		var canvas = document.getElementById("canvas1");

		var ctx = canvas.getContext("2d");
		ctx.lineWidth = 100;
		for(var i = 0; i < 255; i++) {
			ctx.beginPath();
			ctx.moveTo(90 + i, 100);
			ctx.lineTo(90 + i - 1, 100);
			ctx.strokeStyle = 'rgb(' + i + ',' + i + ',' + i + ')';
			ctx.strokeStyle = 'rgb(' + 200 + ',' + 210 + ',' + i + ')';
			ctx.stroke();
		}

绘制可随机换颜色的圆，分成几份，随机填充

var canvas = document.getElementById("canvas2");

			var ctx = canvas.getContext("2d");
			var w = ctx.canvas.width;
			var h = ctx.canvas.height;
			var num = 6;
			var angle = Math.PI * 2 / num;

			var x0 = w / 2;
			var y0 = h / 2;

			var getColor = function() {
				//去掉颜色一样的，重复的。 
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);
				return 'rgb(' + r + ',' + g + ',' + b + ')';
			}

			//			var startAngle = 0;
			for(var i = 0; i < num; i++) {
				var startAngle = i * angle;
				var endAngle = (i + 1) * angle;
				ctx.beginPath();
				ctx.moveTo(x0, y0);
				ctx.arc(x0, y0, 150, startAngle, endAngle);
				ctx.fillStyle = getColor();
				ctx.fill();

			}
		</script>-->

		<script type="text/javascript">
			var canvas = document.getElementById("canvas1");

			var ctx = canvas.getContext("2d");
			ctx.lineWidth = 100;
			for(var i = 0; i < 255; i++) {
				ctx.beginPath();
				ctx.moveTo(90 + i, 100);
				ctx.lineTo(90 + i - 1, 100);
				ctx.strokeStyle = 'rgb(' + i + ',' + i + ',' + i + ')';
				ctx.strokeStyle = 'rgb(' + 200 + ',' + 210 + ',' + i + ')';
				ctx.stroke();
			}

图片的加载

var canvas = document.getElementById("canvas");

			var ctx = canvas.getContext("2d");
			var Image = new Image();
			/*
			 * 图片定位点的大小，截取的大小，在画布的大小，图片的大小
			 */
			Image.onload = function() {
				ctx.drawImage(Image,100,100,400,400,200,200,100,100);
			}
			Image.src ="img/1.jpg";