7.HTML5 高级Canvas技术-1

  	<script> 
  	window.onload = function() {
	  var canvas = document.getElementById("croppedPicCanvas");
	  var context = canvas.getContext("2d");
	  

	  //****绘制图片**/
		var img = document.getElementById("sourcePic");
	  /*
	  source,
	  source_x,source_y,source_width,source_height, 
	  target_x,target_y,target_width,target_height
	  */
	  context.drawImage(img, 
		  0, 0, 100, 100, 
		  0, 0, 500, 500);
		  
		  
	  //注意,他不是立刻就响应的 
	  var img=new Image();
	  img.src="darwin.jpg"; 
	  img.οnlοad=function(){
	  	context.drawImage(img,0,0,50,50);
	  };



	  //从视频中获取
	  /*
	  var video=document.getElementById("vedioPlayer"); 
	  context.drawImage(video, 
		  0, 0, 200, 100, 
		  0, 0, 500, 500);
	  */  

	  	//****绘制文本**/ 
	  	context.font="20px Arial";
	  	context.font="20px Verdana,sans-serif";//不确定浏览器支持哪种字段,可
	  	context.font = "bold 40px Verdana,sans-serif";
	  	context.textBaseline="top";
		context.filleStyle="#000000";
	  	context.fillText("I'm 薛",20,50);
	  	context.lineWidth=1;
	  	context.strokeStyle="green";
	  	context.strokeText("薛", 40, 100);
	  	
		//****阴影与填充**/
		context.rect(250,50,150,150);
	  	context.fillStyle="green";
	  	// 阴影颜色
		context.shadowColor="#bbbbbb";
		//阴影的模糊程度：0表示锐利的阴影,20的时候已经比较模糊,不小于3的时候效果最佳。
		context.shadowBlur=20;
		context.shadowOffsetX=15;
		context.shadowOffsetY=15;
		context.fill();
  		context.fillText("Shadow...", 10, 225);
		
		//填充
		var img = document.getElementById("brickTile");
		//var pattern=context.createPattern(img,"repeat");
		//var pattern=context.createPattern(img,"repeat-x");
		var pattern=context.createPattern(img,"repeat-y");
		context.fillStyle=pattern;
		context.rect(100,350,100,100); 
		context.fill();
		context.stroke();
		
		//填充渐变
	
	 	var gradient = context.createLinearGradient(10, 0, 100, 0);
	  	gradient.addColorStop("0","magenta");
	  	gradient.addColorStop(".25","blue");
	  	gradient.addColorStop(".50","green");
	  	gradient.addColorStop(".75","yellow");
	  	gradient.addColorStop("1.0","red");
		drawHeart(60, 200);
		context.fillStyle = gradient;
		context.fill();
		context.stroke(); 
	};
	
	function drawHeart(x, y) {
	  context.beginPath();
	  context.moveTo(x, y);
	  context.bezierCurveTo(x, y - 40, x - 45, y - 40, x - 48, y);
	  context.bezierCurveTo(x - 45, y + 30, x, y + 40, x, y + 80);
	  context.bezierCurveTo(x, y + 90, x + 45, y + 40, x + 45, y);
	  context.bezierCurveTo(x + 45, y - 30, x, y - 30, x, y);
	  context.closePath();
	}
  	</script>
  	<canvas id="croppedPicCanvas" width="600px" height="600px"></canvas> 
	<img id="sourcePic" src="darwin.jpg"/>
	<img id="brickTile" src="brick_tile.gif" >