HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形


Posted in HTML / CSS onJune 23, 2014

一、自定义画笔样式

如果想为形状图上颜色,需要使用以下两个重要的属性。

fillStyle : 设置下来所有fill操作的默认颜色。
strokeStyle : 设置下来所有stroke操作的默认颜色。

二、绘制具有颜色和透明度的矩形

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset = utf-8">
<title>HTML5</title>
<script type="text/javascript" charset = "utf-8">
//这个函数将在页面完全加载后调用
function pageLoaded()
{
//获取canvas对象的引用,注意tCanvas名字必须和下面body里面的id相同
var canvas = document.getElementById('tCanvas');
//获取该canvas的2D绘图环境
var context = canvas.getContext('2d');
//绘制代码将出现在这里
//设置填充颜色为红色
context.fillStyle = "red";
//画一个红色的实心矩形
context.fillRect(50,50,100,40);
//设置边线颜色为绿色
context.fillStyle = "green";
//画一个绿色空心矩形
context.strokeRect(120,100,100,35);
//使用rgb()设置填充颜色为蓝色
context.fillStyle = "rgb(0,0,255)";
//画一个蓝色的实心矩形
context.fillRect(80,230,100,40);
//设置填充色为黑色且alpha值(透明度)为0.2
context.fillStyle = "rgba(0,0,0,0.2)";
//画一个透明的黑色实心矩形
context.fillRect(300,180,100,50);
}
</script>
</head>
<body onload="pageLoaded();">
<canvas width = "500" height = "300" id = "tCanvas" style = "border:black 1px solid;">
<!--如果浏览器不支持则显示如下字体-->
提示:你的浏览器不支持<canvas>标签
</canvas>
</body>
</html>

三、绘制效果
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
HTML / CSS 相关文章推荐
css3实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
使用HTML5的Notification API制作web通知的教程
May 08 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
新的CSS 伪类函数 :is() 和 :where()示例详解
Aug 05 HTML / CSS
HTML5 在canvas中绘制文本附效果图
Jun 23 #HTML / CSS
HTML5使用drawImage()方法绘制图像
Jun 23 #HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 #HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 #HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 #HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 #HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 #HTML / CSS
You might like
php实现的操作excel类详解
2016/01/15 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
YII框架关联查询操作示例
2019/04/29 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
2016/12/29 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
2017/09/28 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
[06:53]2018DOTA2国际邀请赛寻真——为复仇而来的Newbee
2018/08/15 DOTA
[00:35]可解锁地面特效
2018/12/20 DOTA
使用python实现strcmp函数功能示例
2014/03/25 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
在python shell中运行python文件的实现
2019/12/21 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
中学教师自我鉴定
2014/02/07 职场文书
商场主管竞聘书
2014/03/31 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
正科级干部考察材料
2014/05/29 职场文书
2014年度安全生产目标管理责任书
2014/07/25 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
学校工会工作总结2015
2015/05/19 职场文书
Golang 实现 WebSockets 之创建 WebSockets
2022/04/24 Golang