今天用canvas做了一个页面特效,呼呼,在做的过程中发现createRadialGradient 和 globalAlpha这2个属性一起使用导入不能实现透明度问题,首先把createRadialGradient设置属性总结一下:

createRadialGradient() :

创建一条放射颜色渐变。

参数:

xStart:开始圆的圆心的x坐标

yStart:  开始圆的圆心的Y坐标

radiusStart: 开始圆的半径

xEnd: 结束圆的圆心的x坐标

yEnd: 结束圆的圆心的Y坐标

radiusEnd : 结束圆的半径值

通过上面的设置我们可以实现一个canvas图形渐变效果:

代码如下:

<script>
window.onload = function () {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var radgrad = ctx.createRadialGradient(100, 100, 20, 100, 100, 50);
radgrad.addColorStop(0, 'blue');
radgrad.addColorStop(1, 'yellow');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = radgrad;
ctx.fill();
}
</script>

一个有渐变的圆就这么画好了, 但是我想让它呈现透明状态,这个时候就需要添加globalAlpha属性了,这个是canvas中自带的,值范围是0 至 1

<script>
window.onload = function () {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var radgrad = ctx.createRadialGradient(100, 100, 20, 100, 100, 50);
radgrad.addColorStop(0, 'blue');
radgrad.addColorStop(1, 'yellow');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
//添加透明设置
ctx.globalAlpha = 0.2;
ctx.fillStyle = radgrad;
ctx.fill();
}
</script>

接下来拿火狐和谷歌浏览器来对比一下子效果。

火狐:      谷歌:

一开始看到这个状况突然懵了,这2个浏览器很少存在差异的,但今天给我碰上了。接下来我开始排查问题所在,一开始我以为是把设置透明度ctx.globalAlpha = 0.2;位置放的地方不对所造成的,可是试过之后没有反应。

接着换种方式,把createRadialGradient设置去掉之后 圆就可以透明了,呼呼,关键点找到了,难道createRadialGradient和globalAlpha一起设置有冲突?不可能啊,一个是canvas属性,一个是canvas函数。怎么可能有冲突?脑子越想越陷入一个混乱状态。

就在我没有头绪的时候,我修改了一下createRadialGradient函数中的开始圆的半径为0,顿时火狐上呈现了圆透明效果,

火狐:  谷歌:

Why? 我不知道啥原因,但是我解决了 - -!    嚓 ,无语。。。

demo展示:http://109.kuailingmin.sinaapp.com/lights/index1.html

canvas画布属性globalAlpha 和 createRadialGradient函数出现的设置问题的更多相关文章

  1. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

  2. “canvas画布仿window系统自带画图软件"项目的思考

    "canvas画布仿window系统自带画图软件"项目的思考 首先贴上DEMO图,并没有美化效果.对UI有要求的,请自带补脑技术. 思考一 在做项目的过程中,我发现"工具 ...

  3. 清除canvas画布内容--点擦除+线擦除

    清空canvas画布内容 1.重置宽或高 由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:(此方法仅限需要清除全部内容的情况) var c=document.get ...

  4. H5 新增标签canvas 画布

    canvas是写在body中的标签,设置宽高后,通过JS来往其中绘制想要的内容, canvas可以理解为一个画板,而JS就是你的画笔. 1.获取到画布 var canvas = document.ge ...

  5. 微信小程序_(组件)canvas画布

    canvas画布效果 官方文档:传送门 Page({ canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, o ...

  6. html 5 canvas画布整理

    1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" >< ...

  7. 【读书笔记《Android游戏编程之从零开始》】12.游戏开发基础(Canvas 画布)

    1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十 ...

  8. HTML5 canvas 合成属性

    合成属性 globalAlpha                                设置或返回绘图的当前 alpha 或透明值 globalCompositeOperation       ...

  9. 更新——Canvas画布动画效果之实现倒计时

    Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...

随机推荐

  1. Dom4j把xml转换成Map(非固定格式)

    将xml转换成Map,能够应对不用结构的xml,而不是只针对固定格式的xml.转换规则:1.主要是Map与List的互相嵌套2.同名称的节点会被装进List 示例: import java.util. ...

  2. Python学习笔记——列表

    1.创建列表类型数据并给其赋值 >>> aList = [123,'abc',4.56,['inner','list'],7-9j] >>> aList [123, ...

  3. 在windowService用Process.Start()启动程序没有界面-记录

    1.在服务程序安装时编程实现,ProjectInstaller.cs   using System; using System.Collections; using System.Collection ...

  4. GenomicRangeQuery /codility/ preFix sums

    首先上题目: A DNA sequence can be represented as a string consisting of the letters A, C, G and T, which ...

  5. UVALive 3027 Corporative Network

    ---恢复内容开始--- Corporative Network Time Limit: 3000MS   Memory Limit: Unknown   64bit IO Format: %lld ...

  6. Apache不重新编译,利用apxs工具给Apache添加模块,如cgi模块

    想实践下Apache是如何运行cgi程序的,却发现先前编译安装Apache的时候,没有安装Apache的cgi模块. 附:CentOS6.x编译安装LAMP(2):编译安装 Apache2.2.25 ...

  7. php gettext 多语言翻译

    1.在window与linux下的多语言切换有些区别,主要putenv的设置区别. 参考链接:http://www.cnblogs.com/sink_cup/archive/2013/11/20/ub ...

  8. 笨办法学Python (exercise1-15)

    #exercise1print "Hello world!"print "Hello Again"print "I like typing this. ...

  9. .NET导入导出Excel方法总结

    最近,应项目的需求,需要实现Excel的导入导出功能,对于Web架构的Excel导入导出功能,比较传统的实现方式是: 1)导入Excel:将Excel文件上传到服务器的某一文件夹下,然后在服务端完成E ...

  10. phpstorm的使用教程

    1.设置行号:file->settings->Editor->Appearance->Show line numbers 2.设置字体和背景 :file->setting ...