canvas画布属性globalAlpha 和 createRadialGradient函数出现的设置问题

今天用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? 我不知道啥原因,但是我解决了 - -!    嚓 ,无语。。。

时间: 2024-10-24 08:34:32

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

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

文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫酷,能和鼠标互动吸附或者是躲避鼠标指针. 使用方法 1.该粒子动画库插件使用方法非常简单,首先要在页面中引入particles.js文件. <script src="js/particles.js"></script> 2.在页面中使用一个div来作为放置粒子的容器

[ html 绘图 translate ] canvas绘图属性translate 设置画布中心点属性实例演示

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

JavaScript之Canvas画布

canvas可以在页面中设定一个区域,再利用JavaScript动态地绘制图像. 基本用法 使用canvas元素,首先设置width和height属性,为其设置绘制区域的大小,   如果没有设置宽度和高度,是看不到元素的,不能在其区域画图,在开始标签和结束标签之间的信息是后备信息,当用户的浏览器不支持canvas元素时会显示,用于友好地提示用户. <canvas id="canvas" width="400" height="300">

Canvas画布

 canvas 使用 <canvas> 元素不是非常难但你需要一些基本的HTML和JavaScript知识.<canvas> 元素不被一些老的浏览器所支持,但是所有的主流浏览器的新近版本都支持.Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px).但是,可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸.为了在 Canvas 上绘制图形,我们使用一个JavaScript上下文对象,它能动态创建图像( creates graphics on the

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

1.Canvas 画布 画布类 Canvas 封装了图形和图片绘制等内容,此类常用的函数说明如下: drawColor(int color) 作用:绘制颜色覆盖画布,常用于刷屏 参数:颜色值,也可用十六进制形式表示(ARGB) drawText(String text,float x,float y,Paint paint) 作用:绘制文本字符 第一个参数:文本内容 第二.三个参数:文本的X.Y坐标 第四个参数:画笔实例 drawPoint(float x,float y,Paint paint

第六章 一张白纸好作画—Canvas画布(1)

第六章 一张白纸好作画-Canvas画布 前面的相关章节,我们详细说明过Android UI组件的使用.通过前面章节的学习,开发者已经可以开发出令人满意的UI效果了.但是有的时候,我们需要实现更加漂亮的UI效果,此时可能就无法直接使用UI组件,而是需要自己画出各种UI效果了. 在Android中,Canvas就是一个画布,开发者可以在画布上绘制想要的任何东西.在本章中,我们将介绍Canvas及相关的技术. 6.1 Canvas画布介绍 6.1.1View Canvas-使用普通View的Canv

html5 canvas画布上合成

source-over 默认.在目标图像上显示源图像. source-atop 在目标图像顶部显示源图像.源图像位于目标图像之外的部分是不可见的. source-in 在目标图像中显示源图像.只有目标图像内的源图像部分会显示,目标图像是透明的. source-out 在目标图像之外显示源图像.只会显示目标图像之外源图像部分,目标图像是透明的. destination-over 在源图像上方显示目标图像. destination-atop 在源图像顶部显示目标图像.源图像之外的目标图像部分不会被显

html 5 canvas画布整理

1. 创建canvas画布<canvas id="myCanvas" width="800" height="800" ></canvas>注意:(1)width.height,这两个属性定义了canvas元素宽和高,从而相应的定义了2D渲染上下文的尺寸. (2)2D渲染上下文的尺寸默认值:宽300像素.高150像素.2. 坐标左上角为原点(0,0)右移:x坐标增加下移:y坐标增加3. 2D渲染上下文(真正绘制图形的地方)

HTML5中的&lt;canvas&gt;画布:简单介绍(0)

<canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与css3权威指南>下面对其中最好玩的canvas的学习做下读书笔记与实 验.温馨提示:以下所有实验请使用最新版的opera,火狐. 定义: <canvas> 标签定义图形,比如图表和其他图像. <canvas> 标签只是图形容器,您必须使用脚本(javascript)来绘制图形.