看到 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. 含大量行的订单创建时候creditlimit校验最耗时间

    含大量行的订单创建时候creditlimit校验最耗时间

  2. 使用jquery获取url以及jquery获取url参数的方法

    使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下 1.window.location.href; 其实只是用到了javas ...

  3. 有了第一台自己开发的pro,开心,明天分享最近整理逆向分析ios的一些东西

    最近都在忙于ios深入研究,研究别人的代码,别人的app.然后顺藤摸瓜的找到了关键:逆向,动态特性等. 相关工具:reveal, cycript等. 特别感谢前人的分享,为了打开学习ios的另外一扇大 ...

  4. HTML中常用meta整理

    < meta > 元素 定义 meta标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其 ...

  5. 第23章 排序算法(包括merge等)

      第23章 排序算法  Sorting:1 sort Sort elements in range (function template)2 stable_sort Sort elements pr ...

  6. div一直浮动在页面的底部

    永远在底部是那种无论滚动条怎么拉,都可以看见悬浮在底部的那种,如果是那种,是用固定定位做的.另外注意页面中最后的元素或者body要空出固定条的高度,不然最后的元素会被遮挡. html: <div ...

  7. [笔记]Altera系列01:常用资料下载链接

    Altera官方文档 Altera Product Catalog 外部存储器规范估算器 To be continued.

  8. angularJS学习之旅(1)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. 关于64位windows2003 未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0” 的问题

    我了个去啊! 在自己机器上测试通过的excel导入功能在客户服务器上死活都不好用,查了半天后来发现客户服务器是64位的win2003!! try catch捕捉问题为:未在本地计算机上注册“Micro ...

  10. Selenium2+python自动化19-单选框和复选框(radiobox、checkbox)

    本篇主要介绍单选框和复选框的操作 一.认识单选框和复选框 1.先认清楚单选框和复选框长什么样 2.各位小伙伴看清楚哦,上面的单选框是圆的:下图复选框是方的,这个是业界的标准,要是开发小伙伴把图标弄错了 ...