最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
HTML5 Canvas实现设置透明度使用样例
时间:2016-01-26 编辑:简简单单 来源:一聚教程网
通常我们使用rgb()函数设置不透明的颜色,要实现半透明的颜色有两种方法。
1,使用rgba()函数
这种方法好适合使用多种颜色绘制,而且每个颜色需要单独设置不同的透明度的情况。
比如下面样例,底部的圆形使用实心颜色,上面的三角形使用半透明颜色填充,两种图形边框都使用实心颜色。
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//设置填充及描边颜色
context.fillStyle = "rgb(100,150,185)";
context.line;
context.strokeStyle = "red";
//绘制圆形
context.arc(110, 90, 80, 0, 2*Math.PI);
context.fill();
context.stroke();
//调用beginPath()绘制新形状
context.beginPath();
//用半透明的颜色填充三角形
context.fillStyle = "rgba(100,150,185,0.5)";
//绘制三角形
context.moveTo(215,50);
context.lineTo(25,190);
context.lineTo(315,190);
context.closePath();
context.fill();
context.stroke();
2,设置绘图上下文的globalAlpha属性
设置后,后续所有的绘图操作都会使用相同的透明度。
下面样例可以看到三角形的内部和边框都透明了。
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//设置填充及描边颜色
context.fillStyle = "rgb(100,150,185)";
context.line;
context.strokeStyle = "red";
//绘制圆形
context.arc(110, 90, 80, 0, 2*Math.PI);
context.fill();
context.stroke();
//调用beginPath()绘制新形状
context.beginPath();
//用半透明的三角形
context.globalAlpha = 0.5;
context.fillStyle = "rgba(100,150,185)";
//绘制三角形
context.moveTo(215,50);
context.lineTo(25,190);
context.lineTo(315,190);
context.closePath();
context.fill();
context.stroke();
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31