HTML5 canvas基本绘图之绘制矩形


Posted in HTML / CSS onJune 27, 2016

<canvas></canvas>只是一个绘制图形的容器,除了id、class、style等属性外,还有height和width属性。在<canvas>>元素上绘图主要有三步:

1.获取<canvas>元素对应的DOM对象,这是一个Canvas对象;
2.调用Canvas对象的getContext()方法,得到一个CanvasRenderingContext2D对象;
3.调用CanvasRenderingContext2D对象进行绘图。

绘制矩形rect()、fillRect()和strokeRect()

 •context.rect( x , y , width , height ):只定义矩形的路径;
 •context.fillRect( x , y , width , height ):直接绘制出填充的矩形;
 •context.strokeRect( x , y , width , height ):直接绘制出矩形边框;

JavaScript Code复制内容到剪贴板
  1. <script type="text/javascript">   
  2.     var canvas = document.getElementById("canvas");   
  3.     var context = canvas.getContext("2d");   
  4.   
  5.     //使用rect方法   
  6.     context.rect(10,10,190,190);   
  7.     context.lineWidth = 2;   
  8.     context.fillStyle = "#3EE4CB";   
  9.     context.strokeStyle = "#F5270B";   
  10.     context.fill();   
  11.     context.stroke();   
  12.   
  13.     //使用fillRect方法   
  14.     context.fillStyle = "#1424DE";   
  15.     context.fillRect(210,10,190,190);   
  16.   
  17.     //使用strokeRect方法   
  18.     context.strokeStyle = "#F5270B";   
  19.     context.strokeRect(410,10,190,190);   
  20.   
  21.     //同时使用strokeRect方法和fillRect方法   
  22.     context.fillStyle = "#1424DE";   
  23.     context.strokeStyle = "#F5270B";   
  24.     context.strokeRect(610,10,190,190);   
  25.     context.fillRect(610,10,190,190);   
  26. </script>   
  27.   

HTML5 canvas基本绘图之绘制矩形

这里需要说明两点:第一点就是stroke()和fill()绘制的前后顺序,如果fill()后面绘制,那么当stroke边框较大时,会明显的把stroke()绘制出的边框遮住一半;第二点:设置fillStyle或strokeStyle属性时,可以通过“rgba(255,0,0,0.2)”的设置方式来设置,这个设置的最后一个参数是透明度。

另外还有一个跟矩形绘制有关的:清除矩形区域:context.clearRect(x,y,width,height)。
接收参数分别为:清除矩形的起始位置以及矩形的宽和长。
在上面的代码中绘制图形的最后加上:

context.clearRect(100,60,600,100);

可以得到以下效果:

HTML5 canvas基本绘图之绘制矩形

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
超酷炫 CSS3垂直手风琴菜单
Jun 28 HTML / CSS
一款恶搞头像特效的制作过程 利用css3和jquery
Nov 21 HTML / CSS
CSS3中的opacity属性使用教程
Aug 19 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
AmazeUI 折叠面板的实现代码
Aug 17 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 #HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
Jul 05 #HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 #HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
Jul 13 #HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 #HTML / CSS
HTML5 Web 存储详解
Sep 16 #HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 #HTML / CSS
You might like
加速XP搜索功能堪比vista
2007/03/22 PHP
php错误级别的设置方法
2013/06/17 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
AngularJS之依赖注入模拟实现
2016/08/19 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
JS实现分页导航效果
2020/02/19 Javascript
Python3.6简单操作Mysql数据库
2017/09/12 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
python中时间模块的基本使用教程
2019/05/14 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
python实现在一个画布上画多个子图
2020/01/19 Python
Django-imagekit的使用详解
2020/07/06 Python
容易被忽略的Python内置类型
2020/09/03 Python
python绘制高斯曲线
2021/02/19 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
中国电视购物:快乐购
2017/02/04 全球购物
英国儿童图书网站:Scholastic
2017/03/26 全球购物
TripAdvisor越南:全球领先的旅游网站
2017/09/21 全球购物
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
学生励志演讲稿
2014/01/06 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
小学运动会口号
2014/06/07 职场文书