html5 canvas高级,7.HTML5 高级Canvas技术-1

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();

}