html5的画布canvas——画出简单的矩形、三角形实例代码


Posted in HTML / CSS onJune 09, 2013

首先在html页面中放置一个canvas元素,其中canvas元素应该具备三个属性ID、width、height。

复制代码
代码如下:

<canvas id="demo" width="600" height="600"></canvas>

取得canvas对象并取得上下文var cxt=document.getElementById('demo').getContext("2d");其中参数2d是确定的。

开始绘制,有两种形式,一种是描边(fill),一种是填充(stroke)。

javascript代码:

复制代码
代码如下:

<script language="javascript">
var cxt=document.getElementById('demo').getContext("2d");
cxt.beginPath();
cxt.fillStyle="#F00";/*设置填充颜色*/
cxt.fillRect(0,0,200,100);/*绘制一个矩形,前两个参数决定开始位置,后两个分别是矩形的宽和高*/
cxt.beginPath();
cxt.strokeStyle="#000";/*设置边框*/
cxt.lineWidth=3;/*边框的宽度*/
cxt.strokeRect(0,120,200,100);
cxt.beginPath();
cxt.moveTo(0,350);
cxt.lineTo(100,250);
cxt.lineTo(200,300);
cxt.closePath();/*可选步骤,关闭绘制的路径*/
cxt.stroke();
</script>

效果图:
html5的画布canvas——画出简单的矩形、三角形实例代码
HTML / CSS 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
Sep 02 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
html5的pushstate以及监听浏览器返回事件的实现
Aug 11 HTML / CSS
canvas绘制图片drawImage使用方法
Sep 15 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 #HTML / CSS
HTML5视频支持检测(检查浏览器是否支持视频播放)
Jun 08 #HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 #HTML / CSS
HTML5使用DOM进行自定义控制示例代码
Jun 08 #HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 #HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
May 20 #HTML / CSS
仿酷狗html5手机音乐播放器主要部分代码
May 15 #HTML / CSS
You might like
自动跳转中英文页面
2006/10/09 PHP
服务器web工具 php环境下
2010/12/29 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[02:32]DOTA2亚洲邀请赛 VG战队巡礼
2015/02/03 DOTA
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
python简单判断序列是否为空的方法
2015/06/30 Python
Python之web模板应用
2017/12/26 Python
python测试mysql写入性能完整实例
2018/01/18 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
利用html5的websocket实现websocket聊天室
2013/12/12 HTML / CSS
德国最大的网上足球商店:11teamsports
2019/09/11 全球购物
毕业生自荐信如何写
2014/03/24 职场文书
求职信标题怎么写
2014/05/26 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
生日宴会策划方案
2014/06/03 职场文书
2014年安全生产责任书
2014/07/22 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python