canvasTag+javascript的两个小例子(渐变色和画坐标轴)-CSDN博客

本文链接：https://blog.csdn.net/zyx198793/article/details/6715608

例一：

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script src="js/modernizr.js"></script>

<title>A simple canvas</title>
</head>
<body οnlοad="drawACircle()">
<script type="text/javascript">
  function drawACircle()
  {
	  if(!Modernizr.canvas)alert("你的浏览器不支持canvas");
	  else
	{
	 //定义变量
	 var c=document.getElementById("canvas");
	 var cxt=c.getContext("2d");
	 //画矩形
	 cxt.fillStyle="#ffff00";
	 cxt.fillRect(50,50,100,100)
	 //画圆
	 cxt.arc(700,180,150,0,Math.PI*2,true);
	 cxt.fill();
	 //画渐变的矩形
	 var grd=cxt.createLinearGradient(0,0,600,50);
	     grd.addColorStop(0,"blue");
	     grd.addColorStop(1,"#ff0000");
	     cxt.fillStyle=grd;
	     cxt.fillRect(100,100,400,400)
	//drawImage
	 var img=new Image();
		 img.src="images/sample.jpg";
		 cxt.drawImage(img,20,200);    

		  }
	  }
</script>
<canvas id="canvas" width="1600" height="1000"> </canvas>
</body>
</html>

运行效果：

例子二：画坐标轴

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Coor</title>
</head>
<body>
<canvas id="controlCanvas" height="500" width="500"></canvas>
<script type="text/javascript">
	var canvas = document.getElementById("controlCanvas");
	var context = canvas.getContext("2d");

	for ( var x = 0.5; x <= 500; x += 10) {
		context.moveTo(x, 0);
		context.lineTo(x, 500);
	}
	for ( var y = 0.5; y <= 500; y += 10) {
		context.moveTo(0, y);
		context.lineTo(500, y);
	}
	context.strokeStyle = "#eee";
	context.stroke();
	context.beginPath();
	//画横坐标
	context.moveTo(0, 40);
	context.lineTo(240, 40);
	context.moveTo(280, 40);
	context.lineTo(500, 40);
	context.moveTo(495, 35);
	context.lineTo(500, 40);
	context.lineTo(495, 45);
	//画纵坐标
	context.moveTo(60, 0);
	context.lineTo(60, 240);
	context.moveTo(60, 280);
	context.lineTo(60, 500);
	context.lineTo(55, 495);
	context.moveTo(60, 500);
	context.lineTo(65, 495)

	context.strokeStyle = "#000";
	context.stroke();
</script>
</body>
</html>