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中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
HTML5的语法变化介绍
Aug 13 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 HTML / CSS
详解CSS3浏览器兼容
Dec 24 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 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使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
2016/08/10 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
vue通过接口直接下载java生成好的Excel表格案例
2020/10/26 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python使用sklearn实现决策树的方法示例
2019/09/12 Python
使用Python构造hive insert语句说明
2020/06/06 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
怎样声明子类
2013/07/02 面试题
中职生自我鉴定范文
2013/10/03 职场文书
文秘自荐信
2013/10/20 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
和解协议书
2014/04/16 职场文书
大学生工作自荐书
2014/06/16 职场文书
体育口号大全
2014/06/18 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
老干部座谈会主持词
2015/07/03 职场文书
python超详细实现完整学生成绩管理系统
2022/03/17 Python