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使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
html5的canvas实现3d雪花飘舞效果
Dec 27 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 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
global.php
2006/12/09 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
Python的Urllib库的基本使用教程
2015/04/30 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
python连接mysql有哪些方法
2020/06/24 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
幼儿园父亲节活动方案
2014/03/11 职场文书
普通话宣传标语
2014/06/26 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
不同意离婚上诉状
2015/05/23 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
SQL基础的查询语句
2021/11/11 MySQL
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers