玩转html5canvas画图(8)
时间：2018-11-26
context.shadowOffsetX :阴影的横向位移量（默认值为0）
context.shadowOffsetY :阴影的纵向位移量（默认值为0）
context.shadowColor :阴影的颜色
context.shadowBlur :阴影的模糊范围（值越大越模糊）
内容来自dedecms
先来个简单的例子 织梦内容管理系统
织梦内容管理系统
1 function draw27(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) 4 return false; 5 var context = canvas.getContext('2d'); 6 context.shadowOffsetX = 10; 7 context.shadowOffsetY = 10; 8 context.shadowColor = 'rgba(100,100,100,0.5)'; 9 context.shadowBlur = 1.5; 10 context.fillStyle = 'rgba(255,0,0,0.5)'; 11 context.fillRect(100, 100, 200, 100); 12 }
dedecms.com
本文来自织梦
copyright dedecms再来个书本上的五角星的例子
内容来自dedecms
1 function create5Star(context) { 2 var n = 0; 3 var dx = 100; 4 var dy = 0; 5 6 var s = 50; 7 //创建路径 8 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 } 22 23 function draw11(id) { 24 var canvas = document.getElementById(id); 25 if (canvas == null) 26 return false; 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; 35 //图形绘制 36 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 }
织梦好，好织梦
dedecms.com
绘制图像 内容来自dedecms
绘图：context.drawImage
copyright dedecms
图像平铺：context.createPattern(image,type) 织梦内容管理系统
图像裁剪：context.clip()
织梦内容管理系统
像素处理：var imagedata=context.getImageData(sx,sy,sw,sh)
dedecms.com
绘图 context.drawImage
context.drawImage(image,x,y)
copyright dedecms
image:Image对象var img=new Image(); img.src="url(...)"; 本文来自织梦
x:绘制图像的x坐标
y:绘制图像的y坐标
context.drawImage(image,x,y,w,h) copyright dedecms
image:Image对象var img=new Image(); img.src="url(...)";
copyright dedecms
x:绘制图像的x坐标
织梦好，好织梦
y:绘制图像的y坐标 内容来自dedecms
w:绘制图像的宽度 本文来自织梦
h:绘制图像的高度 dedecms.com
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):选取图像的一部分矩形区域进行绘制 织梦内容管理系统
image:Image对象var img=new Image(); img.src="url(...)";
dedecms.com
sx：图像上的x坐标
sy：图像上的y坐标
内容来自dedecms
sw：矩形区域的宽度
dedecms.com
sh：矩形区域的高度
本文来自织梦
dx：画在canvas的x坐标
dy：画在canvas的y坐标
dedecms.com
dw：画出来的宽度
内容来自dedecms
dh：画出来的高度
内容来自dedecms
最后一个方法可能比较拗，还是上图吧
织梦好，好织梦
内容来自dedecms上一篇：傲剑狂刀出招表（键盘出招表+秘籍） 下一篇：写作文必学的六大修辞手法详解