HTML5 Canvas rect()和strokeRect() 的区别
看到 Canvas rect()和strokeRect()时,发现这俩效果一样。仔细区分后发现:
他们都接受相同的参数,但rect() 只是创建一个矩形,并不绘制,如图:

要看到实际效果需要使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。
例如:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();
而 strokeRect()
方法绘制矩形(不填色)。笔触的默认颜色是黑色。
可以使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。
HTML5 Canvas rect()和strokeRect() 的区别的更多相关文章
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- [HTML5 Canvas学习] 基础知识
HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...
- html5 canvas 实现简单的画图
今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...
- [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)
本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...
- HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...
- 基于 HTML5 Canvas 的拓扑组件开发
在现在前端圈大行其道的 React 和 Vue 中,可复用的组件可能是他们大受欢迎的原因之一, 在 HT 的产品中也有组件的概念,不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去 ...
- HTML5 Canvas(基础知识)
最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...
- 赠书:HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
随机推荐
- Bootstrap 4 中 Alerts 实现
Alert 的使用说明 http://v4-alpha.getbootstrap.com/components/alerts/ JavaScript behavior Triggers Enable ...
- asp.net中选择数字时,另外的数字同时发生变化(适用dev控件)
关键: <ClientSideEvents ValueChanged="AgioChanged" /> <div class="col-sm-4 ...
- Spark Streaming源码解读之生成全生命周期彻底研究与思考
本期内容 : DStream与RDD关系彻底研究 Streaming中RDD的生成彻底研究 问题的提出 : 1. RDD是怎么生成的,依靠什么生成 2.执行时是否与Spark Core上的RDD执行有 ...
- c# winform TreeView NODE(节点) 重命名或获取节点修改后的值
在程序开发过程中我们经常用到treeview,还经常要修改节点的名字.节点名字修改后还想及时更新数据库.这时问题就来了,怎样获取NODE(节点)更新后的值呢?本人试了很多方法最终分析出treeview ...
- SSH整合(1)异常
信息: No Spring WebApplicationInitializer types detected on classpath 十二月 01, 2016 10:06:12 下午 org.apa ...
- sql条件中比较性能优化
第一个比第二个性能高. 查询语句意义: 如果codelist中tablecode配置为0时, t.Table_Code = 'SV_RETURN_BILL'不生效. 如果codelist中tablec ...
- 【原创】No matching distribution found for Twisted>=10.0.0 (from scrapy)
系统 Ubuntu14.04 python 2.7.11 运行 pip install scrapy 报错: No matching distribution found for Twiste ...
- linux上安装配置vsftpd
启动: /usr/sbin/vsftpd & 端口占用: lsof -i:21 位置: whereis vsftpd 默认配置下,匿名用户登录 vsftpd 服务后的根目录是 /var/ftp ...
- VS2012调试时无法启动程序和拒绝访问问题汇总
很多人在使用VS2012的时候会出现下面所示的问题,我也是,而且不止一次,也不是同样的问题,我这里就把一些常见的解决方法罗列一下.
- cocos2d-js版本A*算法
[转]http://blog.csdn.net/realcrazysun1/article/details/43054229 A*算法的东西网上讲了很多~但还是不可避免的要去研究一下,cocos官网上 ...