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 相关文章推荐
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
html5中去掉input type date默认样式的方法
Sep 06 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
使用phonegap进行本地存储的实现方法
Mar 31 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
AmazeUI 缩略图的实现示例
Aug 18 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 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
织梦模板标记简介
2007/03/11 PHP
测试您的 PHP 水平的题目
2007/05/30 PHP
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
利用laravel搭建一个迷你博客实战教程
2017/08/13 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
js读写json文件实例代码
2014/10/21 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
2015/03/30 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
Python写入CSV文件的方法
2015/07/08 Python
如何用python整理附件
2018/05/13 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
Python3获取cookie常用三种方案
2020/10/05 Python
html5/css3响应式页面开发总结
2018/10/16 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
Lenox官网:精美的瓷器&独特的礼品
2017/02/12 全球购物
android面试问题与答案
2016/12/27 面试题
《翻越远方的大山》教学反思
2014/04/13 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
党员干部一句话承诺
2014/05/30 职场文书
《中彩那天》教学反思
2016/02/24 职场文书