html5教程画矩形代码分享


Posted in HTML / CSS onDecember 04, 2013

复制代码
代码如下:

<!DOCTYPE html><head>
<meta charset=utf-8>
<title>HTML5画矩形</title>
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script">http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script</a>>
</head>
<script>
$(document).ready(function(){
var c=document.getElementById("drawbox");
var draw=c.getContext("2d"); //获取2d内容的引用,调用绘图API
draw.fillStyle="#ff0000"; //方式一指定填充颜色
draw.fillRect(0,0,300,100); //坐标和长宽
draw.fillStyle="rgba(0,0,255,0.5)"; //方式二rgb+透明度
draw.fillRect(400,0,100,100); //坐标和长宽
})
</script>
</body>
<canvas id="drawbox" width="500" height="500"></canvas>
</body>
</html>

效果图

html5教程画矩形代码分享

HTML / CSS 相关文章推荐
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
详解快速开发基于 HTML5 网络拓扑图应用
Jan 08 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
Aug 10 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 #HTML / CSS
html5 viewport使用方法示例详解
Dec 02 #HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 #HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 #HTML / CSS
HTML5样式控制示例代码
Nov 27 #HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 #HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 #HTML / CSS
You might like
php 获取本机外网/公网IP的代码
2010/05/09 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
jQuery 局部div刷新和全局刷新方法总结
2016/10/05 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
python之从文件读取数据到list的实例讲解
2018/04/19 Python
python实现关键词提取的示例讲解
2018/04/28 Python
python datetime中strptime用法详解
2019/08/29 Python
python中def是做什么的
2020/06/10 Python
python suds访问webservice服务实现
2020/06/26 Python
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
产品促销活动策划书
2014/01/15 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
护士节活动总结
2014/08/29 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
会计试用期自我评价
2014/09/19 职场文书
2016国培研修心得体会
2016/01/08 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书