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中必须要知道的10个顶级命令
Apr 26 HTML / CSS
css3的transform造成z-index无效解决方案
Dec 04 HTML / CSS
CSS3的first-child选择器实战攻略
Apr 28 HTML / CSS
CSS3制作气泡对话框的实例教程
May 10 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 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
php学习 字符串课件
2008/06/15 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
php实现的递归提成方案实例
2015/11/14 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
Python实现链表反转的方法分析【迭代法与递归法】
2020/02/22 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
韩国11街:11STREET
2018/03/27 全球购物
外企求职信范文分享
2013/12/31 职场文书
安全承诺书范文
2014/03/26 职场文书
服务行业演讲稿
2014/09/02 职场文书
健康状况证明书
2014/11/26 职场文书
业务内勤岗位职责
2015/04/13 职场文书
Redis中缓存穿透/击穿/雪崩问题和解决方法
2021/12/04 Redis
用Python实现屏幕截图详解
2022/01/22 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android