玩转html5canvas画图(9)

时间：2018-11-26

玩转html5canvas画图

内容来自dedecms

玩转html5canvas画图织梦好，好织梦

View Code

1 //drawImage(image,x,y) 2 function draw28(id) { 3 4 var image = new Image(); 5 6 image.src = "Image/html5.jpg"; 7 var canvas = document.getElementById(id); 8 9 if (canvas == null) 10 return false; 11 var context = canvas.getContext("2d"); 12 context.fillStyle = "#EEEEFF"; 13 14 context.fillRect(0, 0, 400, 300); 15 image.onload = function () { 16 context.drawImage(image,0,0); 17 } 18 } 19 20 //drawImage(image,x,y,w,h) 21 function draw12(id) { 22 23 var image = new Image(); 24 25 image.src = "Image/html5.jpg"; 26 var canvas = document.getElementById(id); 27 28 if (canvas == null) 29 return false; 30 var context = canvas.getContext("2d"); 31 context.fillStyle = "#EEEEFF"; 32 33 context.fillRect(0, 0, 400, 300); 34 image.onload = function () { 35 context.drawImage(image, 50, 50, 300, 200); 36 } 37 } 38 39 //drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) 40 function draw13(id){ 41 var image = new Image(); 42 image.src = "Image/html5.jpg"; 43 var canvas = document.getElementById(id); 44 45 if (canvas == null) 46 return false; 47 var context = canvas.getContext("2d"); 48 context.fillStyle = "#EEEEFF"; 49 50 context.fillRect(0, 0, 400, 300); 51 image.onload = function () { 52 context.drawImage(image, 100, 100, 200, 150,50,50,300,200);//这里取的是实际尺寸 53 } 54 }