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( ...
随机推荐
- django(五)
URLs 当一个用户请求一个页面时,Django将按照顺序去匹配每一个模式,并停在第一个匹配请求的URL上. 如果你的url多个正则表达式都能匹配上咋弄?小心出错,这个是按照顺序匹配的 url(r'^ ...
- MSBuild简单介绍
背景 托博客园的福,上周六,有家开发医疗行业系统的初创公司联系我,说在博客园上看到我关于WPF的几篇文章,邀请我去他们那里交流WPF相关的技术知识和心得体会.作为非大拿的我自然是受宠若惊,但对方好意相 ...
- JavaWeb项目连接Oracle数据库
参考网址:http://jingyan.baidu.com/article/0320e2c1d4dd0b1b87507b38.html 既然你要链接oracle数据库 ,那么首先就是先打开我们的ora ...
- UART IP和UVM的验证平台
UART是工程师在开发调试时最常用的工具的,其通信协议简单.opencores 网站提供了兼容16550a的UART IP其基本特性如下: uart16550 is a 16550 compatibl ...
- 《深入理解Nginx》阅读与实践(三):使用upstream和subrequest访问第三方服务
本文是对陶辉<深入理解Nginx>第5章内容的梳理以及实现,代码和注释基本出自此书. 一.upstream:以向nginx服务器的请求转化为向google服务器的搜索请求为例 (一)模块框 ...
- nginx环境下配置nagios-关于nagios配置文件nginx.conf
接上文:nginx环境下配置nagios-关于nginx.conf 配置如下: ; location ~ .*\.(php|php5)?$ { ...
- Android_helloworld
看见 HelloWorld 相信你就明白我要干什么了.这是每个程序的第一步,让 HelloWorld 带我们走入 Android 的学习之旅吧. 前面我们下载了海马模拟器,所以接下来我们是在模拟器上进 ...
- iOS使用Safari调试UIWebView
1.设置Safari "Safari"->"偏好设置"->"高级",勾选"在菜单栏中显示开发菜单" 2.设置 ...
- html() 和 text() 方法的区别
html()方法仅支持XHTML的文档,不能用于XML文档,而text()既支持HTML文档,也 支持XML文档. html():没有参数,用于获取html的值: html(val):有参数,用于设置 ...
- 什么是侧翼区(flanking region)和侧翼区单核苷酸多态性(Flanking SNPs)
侧翼区(flanking region) 根据维基定义:The 5' flanking region is a region of DNA that is adjacent to the 5' end ...