View Code

1 function create5Star(context) { 2 var n = 0; 3 var dx = 100; 4 var dy = 0; s = 50; context.beginPath(); 9 context.fillStyle = 'rgba(255,0,0,0.5)'; 10 var x = Math.sin(0); 11 var y = Math.cos(0); 12 var dig = Math.PI / 5 * 4; 13 for (var i = 0; i < 5; i++) { 14 var x = Math.sin(i * dig); 15 var y = Math.cos(i * dig); 16 context.lineTo(dx + x * s, dy + y * s); 17 18 } 19 context.closePath(); 20 21 } draw11(id) { 24 var canvas = document.getElementById(id); 25 if (canvas == null) ; 27 var context = canvas.getContext("2d"); 28 context.fillStyle = "#EEEEFF"; 29 context.fillRect(0, 0, 400, 300); 30 31 context.shadowOffsetX = 10; 32 context.shadowOffsetY = 10; 33 context.shadowColor = 'rgba(100,100,100,0.5)'; 34 context.shadowBlur =5; context.translate(0, 50); 37 for (var i = 0; i < 3; i++) { 38 context.translate(50, 50); 39 create5Star(context); 40 context.fill(); 41 } 42 }

绘制图像 

绘图：context.drawImage

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

图像裁剪：context.clip()

像素处理：var imagedata=context.getImageData(sx,sy,sw,sh)

绘图 context.drawImage

    context.drawImage(image,x,y)

        image:Image对象var img=new Image(); img.src="url(...)";

        x:绘制图像的x坐标

        y:绘制图像的y坐标

    context.drawImage(image,x,y,w,h)

        image:Image对象var img=new Image(); img.src="url(...)";

        x:绘制图像的x坐标

        y:绘制图像的y坐标

        w:绘制图像的宽度

        h:绘制图像的高度

    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):选取图像的一部分矩形区域进行绘制

        image:Image对象var img=new Image(); img.src="url(...)";

        sx：图像上的x坐标

        sy：图像上的y坐标

        sw：矩形区域的宽度

        sh：矩形区域的高度

        dx：画在canvas的x坐标

        dy：画在canvas的y坐标

        dw：画出来的宽度

        dh：画出来的高度

    最后一个方法可能比较拗，还是上图吧