HTML5 在canvas中绘制矩形附效果图


Posted in HTML / CSS onJune 23, 2014

一、绘制矩形

canvas使用原点(0,0)在左上角的坐标系统,x坐标向右递增,y坐标向下递增。

使用绘图环境的矩形绘制函数来绘制矩形。

fillRect(x,y,width,height) : 绘制一个实心的矩形。
strokeRect(x,y,width,height) : 绘制一个空心的矩形。
clearRect(x,y,width,height) : 清除指定的矩形区域,使之完全透明。

二、在canvas中绘制矩形 

复制代码
代码如下:

<!--<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。-->
<!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');
//绘制代码将出现在这里
//实心矩形
//在点(200,10)处绘制一个宽和高均为100像素的实心正方形
context.fillRect(200,10,100,100);
//在点(50,70)处绘制一个宽90像素、高30像素的实心矩形
context.fillRect(50,70,90,30);
//空心矩形(矩形边框)
//在点(110,10)处绘制一个宽和高均为50像素的正方形边框
context.strokeRect(110,10,50,50);
//在点(30,10)处绘制一个宽和高均为50像素的正方形边框
context.strokeRect(30,10,50,50);
//清除矩形区域
//清除点(210,20)处宽30像素、高20像素的矩形区域
context.clearRect(210,20,30,20);
//清除点(260,20)处宽30像素、高20像素的矩形区域
context.clearRect(260,20,30,20);
}
</script>
</head>
<body onload="pageLoaded();">
<canvas width = "400" height = "200" id = "tCanvas" style = "border:black 1px solid;">
<!--如果浏览器不支持则显示如下字体-->
提示:你的浏览器不支持<canvas>标签
</canvas>
</body>
</html>

三、绘制效果
HTML5 在canvas中绘制矩形附效果图
HTML / CSS 相关文章推荐
CSS3使用多列制作瀑布流
May 10 HTML / CSS
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
css3 border-image使用说明
Jun 23 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
Oct 11 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
css样式important规则的正确使用方式
Jun 10 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 #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
You might like
杏林同学录(七)
2006/10/09 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
Javascript 获取滚动条位置等信息的函数
2009/09/08 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
js实现图片轮播效果
2015/12/19 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
有机童装:Toby Tiger
2018/05/23 全球购物
局域网定义和特性
2016/01/23 面试题
后勤主管工作职责
2013/12/07 职场文书
先进人物事迹材料
2014/12/29 职场文书
商务司机岗位职责
2015/04/10 职场文书