html中canvas设置透明度,HTML5 Canvas绘制时指定颜色与透明度的方法
这篇文章主要介绍了HTML5 Canvas绘制时指定颜色与透明度的方法,包括全局透明globalAlpha属性的介绍,需要的朋友可以参考下
指定颜色
黑色是Canvas绘制的默认色彩,要想换一种颜色的话,就得在实际画之前指定颜色。
JavaScript Code复制内容到剪贴板ctx.strokeStyle = color
指定绘制线的颜色:
JavaScript Code复制内容到剪贴板ctx.fillStyle = color
指定填充的颜色:
来看看实际的例子:
JavaScript
JavaScript Code复制内容到剪贴板onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'rgb(192, 80, 77)'; // 红
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(155, 187, 89)'; // 绿
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgb(128, 100, 162)'; // 紫
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}
效果如下图:
指定透明度
和普通的CSS中一样,我们指定颜色的时候还可以带一个alpha值(不过用的不多,IE9之前都不支持)。看代码:
JavaScript
JavaScript Code复制内容到剪贴板onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = 'rgba(192, 80, 77, 0.7)'; //
ctx.arc(70, 45, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgba(155, 187, 89, 0.7)'; //
ctx.arc(45, 95, 35, 0, Math.PI*2, false);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'rgba(128, 100, 162, 0.7)'; //
ctx.arc(95, 95, 35, 0, Math.PI*2, false);
ctx.fill();
}
结果就是下面这样:
和上面的代码基本没变化,就是把rgb(r, g, b)变成了rgba(r, g, b, a)而已,a的值也是0~1,0表示完全透明,1则是完全不透明(所以alpha的值实际上是“不透明度”)。
全局透明globalAlpha这个也是很简单的一个属性,默认值为1.0,代表完全不透明,取值范围是0.0(完全透明)~1.0。这个属性与阴影设置是一样的,如果不想针对全局设置不透明度,就得在下次绘制前重置globalAlpha。
总结一下:基于状态的属性有哪些?
——globalAlpha
——globalCompositeOpeartion
——strokeStyle
——textAlign,textBaseline
——lineCap,lineJoin,lineWidth,miterLimit
——fillStyle
——font
——shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY
我们通过一个代码,来体验一下globalAlpha的神奇之处~
JavaScript Code复制内容到剪贴板
全局透明
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
你的浏览器居然不支持Canvas?!赶快换一个吧!!
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
context.globalAlpha = 0.5;
for(var i=0; i<=50; i ){
var R = Math.floor(Math.random() * 255);
var G = Math.floor(Math.random() * 255);
var B = Math.floor(Math.random() * 255);
context.fillStyle = "rgb(" R "," G "," B ")";
context.beginPath();
context.arc(Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 100, 0, Math.PI * 2);
context.fill();
}
};
运行结果:
是不是非常的酷?终于有点艺术家的范儿了吧。
相关推荐:
使用HTML5 Canvas为图片填充颜色和纹理
html中canvas设置透明度,HTML5 Canvas绘制时指定颜色与透明度的方法相关推荐
- [Unity] Canvas 设置为 Screen Space - Camera 时,UI 被场景物体遮挡的解决办法:设置 Canvas 的 Plane Distance 为一个较小的数
Canvas 设置为 Screen Space - Camera 时,UI 可能被场景物体遮挡,如下图所示 只要设置 Canvas 的 Plane Distance 为一个很小的值,它就几乎永远不会被 ...
- Word中如何设置表格的边框线样式和颜色
在 Word 中完成表格制作工作后,我们可以将表格中的边框线的线形设置成各种样式,不仅不如此,我们还可以将边框线的颜色自由设置.这样的表格就比平常我们看到的表格要多样化一些.下面就看看是如何操作的吧! ...
- html表格内框线怎么设置颜色,word表格样式 Word中如何设置表格的边框线样式和颜色...
word表格样式 Word中如何设置表格的边框线样式和颜色,平凡的世界平凡的你,努力学习使我们变得不平凡,今天要介绍的知识是word表格样式的相关知识,你准备好学习word表格样式 Word中如何设置 ...
- html线条 实线中带一圆点,HTML5 Canvas: 绘制圆点虚线
HTML5 Canvas 提供了很多图形绘制的函数,但是很可惜,Canvas API只提供了画实线的函数(lineTo),却并未提供画虚线的方法.这样的设计有时会带来很大的不便,<JavaScr ...
- html5中移动旋转缩放,HTML5 Canvas进阶(一):渐变,透明,移动,旋转,缩放
前一篇博文介绍了在标签中绘制图形的一些基本方法,本文将进一步介绍如何在标签中对图形图像进行操纵. 渐变 Context对象可以通过createLinearGradient()和createRadial ...
- html5 canvas 圆圈,使用HTML5 Canvas arc()绘制圆形/圆环
前段时间的一个项目做到这个玩意,研究了一下绘制圆环的方法.最终使用HTML5的画布标签来做.arc()是HTML5 Canvas的一个API函数,作用是"创建弧/曲线(用于创建圆形或部分圆) ...
- html5 canvas实际应用,Html5 Canvas入门及经典应用
Html5 Canvas入门及经典应用 时间:2019-02-15 来源:华清远见 canvas想必对于前端的工程师都不陌生了,它是 HTML5 新增的「画布」元素,是HTML5 的一大亮点, ...
- html5 canvas 博客,html5 Canvas
Canvas canvas就是一个画布,可以进行画任何的线,图形,填充等一系列操作,而且操作画图的就是js,所以让js编程到了嗑药的地步,另外,canvas不仅仅提供了简单的二维矢量绘图,也提供了三维 ...
- html5的canvas动画效果,HTML5 Canvas:制作动画特效
要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果.这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然 ...
最新文章
- Python开发入门与实战1-开发环境
- java.lang.LinkageError: JAXB 2.0 API is being loaded from the bootstrap classloader, but this RI(xxx
- python模型部署方法_终极开箱即用的自动化Python模型选择方法
- 关于如果减少勒索病毒的侵扰:
- 里诺全系列注册机+暗桩patch
- 工业交换机在智能交通电子警察系统解决方案的应用
- python猜数字十次、猜对输出猜了多少次_python-猜数字小练习
- JVM学习笔记(4)-运行时数据区详解之程序计数器与虚拟机栈
- python中ipaddress库用法详解
- 什么是高中物理?一篇长长长长文告诉你!
- JFrog Artifactory的数据备份与恢复教程
- 力扣有没有java_力扣 APP 全新改版,史诗级增强!
- 『.Net』微软家的女儿们
- 基于MATLAB的条形码识别系统
- Gridmanager
- Object.defineProperty也能监听数组变化?
- 农村环境保护之平时作业一
- uniapp里获取验证码
- WinRAR官方不带弹窗广告的简体中文版
- 简单操作,只需3步完成在线图片加字编辑