html5 canvas 半透明,HTML5 canvas 透明

透明

Context对象可以通过改变它的globalAlpha属性来改变生成它的Canvas对象的透明度。globalAlpha属性的取值范围是[0, 1]，0表示完全透明，1表示完全不透明。

例子如下：

Your browserdoes not support the canvas element!

var canvas =document.getElementById("canvas");

var context2D =canvas.getContext("2d");

const TIME = 1

var factor = 0;

function changeAlpha() {

factor+= TIME/50;

context2D.globalAlpha= (Math.sin(factor) + 1) / 2; //这里采用简单算法布置透明

}

function draw() {

context2D.clearRect(0,0, canvas.width, canvas.height);

changeAlpha();

//将上面的圆填充为灰色

context2D.fillStyle ="#FF0000";

context2D.arc(100,100, 60, 0, Math.PI*2 , false); //注意这里的参数是弧度制，而不是角度制

context2D.fill();

}

setInterval(draw, TIME);

效果图：

ps：由于是动态图，截屏出来的效果只是一帧，不能出现动态效果，读者可以自己亲手做实验。另外有比较好的方式制作动态图，可以留言，不胜感激。

html5 canvas 半透明,HTML5 canvas 透明相关推荐

html5 mask,HTML5 Canvas渐进填充与透明实现图像的Mask效果
HTML5 Canvas渐进填充与透明实现图像的Mask效果 2020-03-24 19:10:45 字体:大中小来源:转载供稿:网友详细解释HTML5 Canvas中渐进填充的参数设置与使 ...
HTML5 Canvas渐进填充与透明（摘自 http://blog.csdn.net/jia20003/article/details/9251893）
一:渐进填充(Gradient Fill) Canvas支持两种渐进填充方式,一种为线性渐进填充(Line Gradient Fill),另外一种称为经向渐变填充(RadialGradient Fi ...
开发者值得关注的HTML5新特性：Canvas
随着IE 10的即将发布正式版,标志者HTML5的时代已经越来离我们越来越近了,尽管HTML 5的最终标准草案还没最终敲定,但象Chrome,Firefox等浏览器对HTML5的标准已经支持的十分完善 ...
在HTML5中如何利用Canvas处理并存储图片
HTML5中增加的Canvas元素,配合JS灵活的语法,处理起图片变得异常简单,不需要在客户端用C/C 写一大堆代码,对于熟悉JS的程序员来说,只需要考虑处理图片的逻辑了. canvas中如果想要处理 ...
html5 strongeaseinout,HTML5新特性之canvas标签（Day1-4）(示例代码)
canvas 1.什么是canvas? 1.1 是HTML5提供的一种新标签 1.2 canvas是一个矩形区域的画布,可以用JavaScript在上面绘画.控制其每一个像素 1.3 canvas 拥 ...
html5怎么画坐标图,新手如何5分钟学会用canvas在HTML5上画简单图形
HTML5中的另外一个新元素是标签.须要使用JavaScript来操做和绘制画布. canvas元素为脚本提供了一个依赖于分辨率的位图画布,它能够用于呈现图形.游戏图形或其余可视图像. 当一个更合适的 ...
html5怎么转换,HTML5 canvas中的转换方法
转换方法 scale(scalewidth,scaleheight) 缩放当前绘图至更大或更小 scalewidth 缩放当前绘图的宽度 (1=100%, ...
html5使用阴影,HTML5 Canvas阴影用法演示
HTML5 Canvas阴影用法演示 HTML5 Canvas中提供了设置阴影的四个属性值分别为: context.shadowColor = "red" 表示设置阴影颜色为红色 ...
新手如何5分钟学会用canvas在HTML5上画简单图形
HTML5中的另一个新元素是标签.需要使用JavaScript来操作和绘制画布. canvas元素为脚本提供了一个依赖于分辨率的位图画布,它可以用于呈现图形.游戏图形或其他可视图像. 当一个更合适的元 ...

html5 canvas 半透明,HTML5 canvas 透明

html5 canvas 半透明,HTML5 canvas 透明相关推荐

最新文章

热门文章