代码:
1 /** 2 * Created by Administrator on 2016/2/1. 3 */ 4 function draw (id){ 5 var canvas = document.getElementById(id); 6 var context = canvas.getContext('2d'); 7 //阴影效果 8 context.shadowColor = "#FA8072"; 9 context.shadowOffsetX = -5; 10 context.shadowOffsetY = 5; 11 context.shadowBlur = 5; 12 //文本 13 context.fillStyle = "#E3170D"; 14 context.globalAlpha = 0.8; 15 context.font = "bold 36px impact"; 16 context.fillText("Hello World" ,10,50); 17 }
用到的方法有:
shadowColor();shadowOffsetX();shaowOffsetY();shadowBure()。
说明:
shadowColor(): 设置阴影颜色。可以为半透明颜色。
shadowBure():高斯模糊,就是PS那个。值越大,边缘越模糊。
妙点:阴影属性不仅可以应用到任何绘制的图像中,还可以应用到图片中。
插播一个方法:measureText(),可用于获取文本的宽度。
用法示例:
var txt = "Hello Word";
var tm = context.measureText(txt);
congtext.fillText(tm.width,tm.width,50);