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 简单又实用的5个属性
Mar 04 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
网页切图的CSS和布局经验与要点
Apr 09 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 HTML / CSS
css3使用animation属性实现炫酷效果(推荐)
Feb 04 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 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 向访客和爬虫显示不同的内容
2009/11/09 PHP
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
javascript 对象的定义方法
2007/01/10 Javascript
JavaScript面向对象编程
2008/03/02 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
2013/06/24 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
python判断完全平方数的方法
2018/11/13 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
开会迟到检讨书
2014/02/03 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
vue 实现上传组件
2021/05/31 Vue.js
python scrapy简单模拟登录的代码分析
2021/07/21 Python