码迷,mamicode.com
首页 > 其他好文 > 详细

canvas阴影与渐变

时间:2017-10-11 00:50:54      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:pre   add   line   style   表示   位置   ado   owb   getc   

 1、阴影
  shadowColor 阴影颜色

  shadowOffsetX    阴影x轴的偏移量

  shadowOffsetY    y轴偏移量

  shadowBlur   模糊像素

var canvas = document.getElementById(‘canvas‘);
var context = canvas.getContext(‘2d‘);

context.shadowColor = ‘rgba(280,187,188,1)‘;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 20;
context.fillStyle = ‘rgba(280,187,188,1)‘;
context.fillRect(50,50,100,100);

2、渐变,由canvasGradient实例表示。

(1)线性渐变createLinearGradient(起点x,起点y,终点x,终点y),创建指定大小的渐变。

var gradient = context.createLinearGradient(30,30,130,130);
gradient.addColorStop(0,‘rgba(280,187,188,1)‘);// addColorStop()指定色标
gradient.addColorStop(1,‘rgba(180,187,188,1)‘);
context.fillStyle = gradient;
context.fillRect(10,10,100,100);

注:上例中执行代码所得矩形,粉色多于灰色,是因为矩形的起点位置位于渐变的位置的左上方。

 

canvas阴影与渐变

标签:pre   add   line   style   表示   位置   ado   owb   getc   

原文地址:http://www.cnblogs.com/cornlin/p/7648464.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!