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实现字体颜色渐变的实现
Mar 09 HTML / CSS
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
html5开发三八女王节表白神器
Mar 07 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
CSS3常见动画的实现方式
Apr 14 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框架Phpbean说明
2008/01/10 PHP
PHP中使用php5-ffmpeg撷取视频图片实例
2015/01/07 PHP
8个必备的PHP功能开发
2015/10/02 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
html组件不可输入(只读)同时任何组件都有效
2013/04/01 Javascript
js判断设备是否为PC并调整图片大小
2014/02/12 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
python实现上传下载文件功能
2020/11/19 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
室内设计实习自我鉴定
2013/09/25 职场文书
网络工程专业毕业生推荐信
2013/10/28 职场文书
自我鉴定标准格式
2014/03/19 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
技术合作协议书范本
2014/04/18 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
入党积极分子个人总结
2015/03/02 职场文书
开除员工通知
2015/04/22 职场文书
离婚起诉书范本
2015/05/18 职场文书
教师个人教学反思
2016/02/23 职场文书
一文搞懂Java中的注解和反射
2022/06/21 Java/Android