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

例一:
<!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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值