canvas阴影

代码:

 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 }
View Code

用到的方法有:

  shadowColor();shadowOffsetX();shaowOffsetY();shadowBure()。

  说明:

    shadowColor(): 设置阴影颜色。可以为半透明颜色。

    shadowBure():高斯模糊,就是PS那个。值越大,边缘越模糊。

妙点:阴影属性不仅可以应用到任何绘制的图像中,还可以应用到图片中。

插播一个方法:measureText(),可用于获取文本的宽度。

  用法示例:

        var txt = "Hello Word";

        var tm = context.measureText(txt);

        congtext.fillText(tm.width,tm.width,50);

 

转载于:https://www.cnblogs.com/chenluomenggongzi/p/5174686.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值