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字体效果的设置方法小结
Jun 13 HTML / CSS
css3绘制天猫logo实现代码
Nov 06 HTML / CSS
CSS伪类与CSS伪元素的区别及由来具体说明
Dec 07 HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
HTML中的表单Form实现居中效果
May 25 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通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
Python 深入理解yield
2008/09/06 Python
Python 用户登录验证的小例子
2013/03/06 Python
详解python中递归函数
2019/04/16 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
苹果音乐订阅:Apple Music
2018/08/02 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
建筑工程技术应届生自荐信
2013/09/27 职场文书
实习生自我鉴定
2013/12/12 职场文书
商务英语广告词大全
2014/03/18 职场文书
老龄工作先进事迹
2014/08/15 职场文书
区域经理岗位职责
2015/02/02 职场文书
出纳岗位职责范本
2015/03/31 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
pytorch Dropout过拟合的操作
2021/05/27 Python