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 相关文章推荐
CSS3 translate导致字体模糊的实例代码
Aug 30 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
详解CSS3原生支持div铺满浏览器的方法
Aug 30 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 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
PHP中MD5函数使用实例代码
2008/06/07 PHP
php 字符转义 注意事项
2009/05/27 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
php实现小程序支付完整版
2018/10/09 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
Jquery实现顶部弹出框特效
2015/08/08 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
window下eclipse安装python插件教程
2017/04/24 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
土地转让协议书
2014/04/15 职场文书
项目经理任命书
2014/06/04 职场文书
工地安全质量标语
2014/06/07 职场文书
学前教育见习总结
2015/06/23 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电