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使用border-radius属性制作圆角
Dec 22 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
HTML5中的postMessage API基本使用教程
May 20 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 HTML / CSS
HTML5公共页面提取作为公用代码的方法
Jun 30 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 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
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
php上传文件问题汇总
2015/01/30 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
Thinkphp和onethink实现微信支付插件
2016/04/13 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
2012/12/15 Javascript
JavaScript 面向对象与原型
2015/04/10 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
基于element-ui的rules中正则表达式
2018/09/04 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
python编写爬虫小程序
2015/05/14 Python
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
python虚拟环境完美部署教程
2019/08/06 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
一文读懂Python 枚举
2020/08/25 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
2017/08/03 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
大学生的网上创业计划书
2013/12/31 职场文书
小学生开学第一课活动方案
2014/03/27 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
Python机器学习之决策树和随机森林
2021/07/15 Javascript