玩转html5canvas画图(10)

时间：2018-11-26

玩转html5canvas画图

本文来自织梦

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

View Code

1 function draw14(id) { 2 //传统的平铺是用for循环来处理的，现在直接调用接口 3 var image = new Image(); 4 var canvas = document.getElementById(id); 5 if (canvas == null) 6 return false; 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 () { 13 //每次转换平铺类型清空 14 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 }

内容来自dedecms

玩转html5canvas画图

dedecms.com

本文来自织梦

图像裁剪：context.clip()

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

织梦内容管理系统

先创建裁剪区域

dedecms.com

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

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

dedecms.com

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

玩转html5canvas画图 copyright dedecms

View Code

1 //图像裁剪 2 function draw15(id) { 3 var canvas = document.getElementById(id); 4 if (canvas == null) 5 return false; 6 var context = canvas.getContext("2d"); 7 context.fillStyle = "black"; 8 context.fillRect(0, 0, 400, 300); 9 image = new Image(); 10 image.onload = function () { 11 drawImg(context,image); 12 } 13 image.src = "Image/html5.jpg" 14 } 15 16 function drawImg(context, image) { 17 //圆形裁剪区 18 //createCircleClip(context) 19 //星形裁剪区 20 create5StarClip(context); 21 context.drawImage(image,0,0); 22 } 23 24 function createCircleClip(context) { 25 context.beginPath(); 26 context.arc(200, 150, 100, 0, Math.PI * 2, true); 27 context.closePath(); 28 context.clip(); 29 } 30 31 function create5StarClip(context) { 32 var n = 0; 33 var dx = 200; 34 var dy = 135; 35 var s = 150; 36 context.beginPath(); 37 var x = Math.sin(0); 38 var y = Math.cos(0); 39 var dig = Math.PI / 5 * 4; 40 for (var i = 0; i < 5; i++) { 41 var x = Math.sin(i * dig); 42 var y = Math.cos(i * dig); 43 context.lineTo(dx + x * s, dy + y * s); 44 } 45 context.closePath(); 46 context.clip(); 47 } 内容来自dedecms