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实现3D旋转书本效果
Mar 21 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 HTML / CSS
Html5新增标签与样式及让元素水平垂直居中
Jul 11 HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
DIV CSS实现网页背景半透明效果
Dec 06 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递归算法的详细示例分析
2013/02/19 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
Javascript this 函数深入详解
2016/12/13 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
利用Python计算KS的实例详解
2020/03/03 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
Ruby中的保护方法和私有方法与一般面向对象程序设计语言的一样吗
2013/05/01 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
协议书范本
2014/04/23 职场文书
党员承诺书怎么写
2014/05/20 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书