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的新特性
Sep 05 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
Jul 08 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
Nov 13 HTML / CSS
2014年圣诞节倒计时网页的制作过程
Dec 05 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
Feb 03 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 25 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 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实现网站插件机制的方法
2009/11/10 PHP
php过滤敏感词的示例
2014/03/31 PHP
php实现插入排序
2015/03/29 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
Python学习资料
2007/02/08 Python
Python中enumerate函数代码解析
2017/10/31 Python
python如何在循环引用中管理内存
2018/03/20 Python
python实现控制台打印的方法
2019/01/12 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
python里glob模块知识点总结
2021/01/05 Python
python中的unittest框架实例详解
2021/02/05 Python
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
StringBuilder和String的区别
2015/05/18 面试题
人事专员工作职责
2014/02/22 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
人事专员岗位说明书
2014/07/29 职场文书
销售顾问工作计划书
2014/09/15 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
给医院的感谢信
2015/01/21 职场文书
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python
mysql查看表结构的三种方法总结
2022/07/07 MySQL