看到 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() 的区别的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  2. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  3. [HTML5 Canvas学习] 基础知识

    HTML5 canvas元素通过脚本语言(通常是Javascript) 绘制图形, 它仅仅是一个绘图环境,需要通过getContext('2d')方法获得绘图环境对象,使用绘图环境对象在canvas元 ...

  4. html5 canvas 实现简单的画图

    今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js  , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...

  5. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  6. HTML5 canvas画图

    HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript).不过,<canvas> 元素本身并没有绘制能力(它仅仅是 ...

  7. 基于 HTML5 Canvas 的拓扑组件开发

    在现在前端圈大行其道的 React 和 Vue 中,可复用的组件可能是他们大受欢迎的原因之一, 在 HT 的产品中也有组件的概念,不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去 ...

  8. HTML5 Canvas(基础知识)

    最近笔者在学习HTML5的新元素<canvas>,会分享一些基础知识以及小例子,最终使用<canvas>实现一个绘制简单图表(条形图.线图或者饼图)的js库,会更新一到两篇文章 ...

  9. 赠书:HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

随机推荐

  1. Jmeter组件3. HTTP Cookie Manager

    两个坑的地方 如果一个域(scope)内有两个cookie manager,Jmeter说,我分不清了,你自己看着办吧,所以不要没事找事,一个域内一个cookie manager够了 用户自定义coo ...

  2. c++操作符重载

    一.类型转换操作符(type conversion operator)[1] 参考: [1]. C++类型转换操作符(type conversion operator): http://www.cpp ...

  3. angular run()运行块

    和配置块不同,运行块在注入器创建之后被执行,它是所有AngularJS应用中第一个被执行的方法. 运行块是AngularJS中与main方法最接近的概念.运行块中的代码块通常很难进行单元测试,它是和应 ...

  4. PIC32MZ tutorial -- Input Capture

    Today I accomplish a simple application for PIC32MZ EC Starter Kit. This application uses Input Capt ...

  5. Linux命令总结:file

    转自:http://www.cnblogs.com/kerrycode/p/3806618.html 1.命令简介:用来识别文件类型,也可辨别一些文件的编码格式.它是通过查看文件的头部信息来获取文件类 ...

  6. 初学matlab----函数用法(随学习更新中)

    sort(A) 若A是向量不管是列还是行向量,默认都是对A进行升序排列. sort(A)是默认的升序,而sort(A,'descend')是降序排序. sort(A)若A是矩阵,默认对A的各列进行升序 ...

  7. linux 修改ssh端口号

    vi /etc/ssh/sshd_config 找到#Port 22一段,这里是标识默认使用22端口,修改为如下:  代码如下 复制代码 Port 22 Port 50000 然后保存退出 执行/et ...

  8. 第五百八十一天 how can I 坚持

    也是醉了,现在买个手机都特么搞饥饿营销,吹牛B就要付出吹牛B的代价,哎,好伤感. 晚上学习也没学好.感觉人和人之间的信任怎么都没了呢..但愿是我想多了,其实就是我想多了,以后说话还是要多注意. 睡觉吧 ...

  9. logging日志模块

    为什么要做日志: 审计跟踪:但错误发生时,你需要清除知道该如何处理,通过对日志跟踪,你可以获取该错误发生的具体环境,你需要确切知道什么是什么引起该错误,什么对该错误不会造成影响. 跟踪应用的警告和错误 ...

  10. machine learning----->什么是机器学习

    1.概述: 学习一门学问的第一步就是要了解这门学问到底是什么,它可以被用来干什么. 本文罗列了学习machine learning的过程中看到的一些写得比较好的文章以及读完这些文章之后对机器学习的初步 ...