View Code

draw28(id) { image = new Image(); 5 6 image.src = "Image/html5.jpg"; 7 var canvas = document.getElementById(id); (canvas == null) ; 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 } draw12(id) { image = new Image(); 24 25 image.src = "Image/html5.jpg"; 26 var canvas = document.getElementById(id); (canvas == null) ; 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 } draw13(id){ 41 var image = new Image(); 42 image.src = "Image/html5.jpg"; 43 var canvas = document.getElementById(id); (canvas == null) ; 47 var context = canvas.getContext("2d"); 48 context.fillStyle = "#EEEEFF"; 49 50 context.fillRect(0, 0, 400, 300); 51 image.onload = function () { } 54 }

三个方法的运行结果如下：

图像平铺 context.createPattern(image,type)

    type:
        no-repeat:不平铺

        repeat-x:横方向平铺

        repeat-y:纵方向平铺

        repeat:全方向平铺

类似图形组合，给出动态的切换平铺类型代码

View Code

1 function draw14(id) { image = new Image(); 4 var canvas = document.getElementById(id); 5 if (canvas == null) ; 7 var context = canvas.getContext("2d"); 8 var type = ["no-repeat", "repeat-x", "repeat-y", "repeat"]; 9 var i = 0; 10 image.src = "Image/wordslogo.jpg"; 11 image.onload = function () { 12 var interval = setInterval(function () { context.clearRect(0, 0, 400, 300); 15 if (i >= 4) { 16 i = 0; 17 } 18 var ptrn = context.createPattern(image, type[i]); 19 context.fillStyle = ptrn; 20 context.fillRect(0, 0, 400, 300); 21 i++; 22 }, 1000); 23 }; 24 }

图像裁剪：context.clip()

    context.clip()只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候

        先创建裁剪区域

        再绘制图像（之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲）

 给出圆形和星形的裁剪代码