看到 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. 安卓:drawable

    <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...

  2. winform画图闪烁问题

    问题:在winform程序的onpaint方法中画图, 连续画, 如鼠标移动时就要不断画图, 会闪烁. 解决方法:将要画图的部分放到一个自定义控件中, 自定义控件的onpaint方法里面画图, 然后再 ...

  3. python之I/O多路复用

         python  IO多路复用 一.多路复用概念: 监听多个描述符(文件描述符(windows下暂不支持).网络描述符)的状态,如果描述符状态改变 则会被内核修改标志位,进而被进程获取进而进行 ...

  4. Visual Studio 中可执行文件中嵌入的清单文件

    概要 本分步指南介绍如何在 Microsoft Visual Studio 2005年中的可执行文件 (.exe) 文件中嵌入的清单文件.如果您要开发"认证 Windows Vista&qu ...

  5. Spark Streaming源码解读之Job动态生成和深度思考

    本期内容 : Spark Streaming Job生成深度思考 Spark Streaming Job生成源码解析 Spark Core中的Job就是一个运行的作业,就是具体做的某一件事,这里的JO ...

  6. [前端_EasyUI]给easyui的datebox设置默认值,获取不到 的解决方法

    //给eayui datebox设置初始值 $("#ctime").datebox("setValue", function(){ var date = new ...

  7. ssh通道技术

    所有机器均为Linux操作系统.   机器是A,中间服务器为B,目标服务器是C. 从A可以ssh到B,从B可以ssh到C,但是A不能直接ssh到C. 现在展示利用ssh通道技术从A直接传输文件到C. ...

  8. eclipse与myeclipse恢复已删除的文件和代码

    1.类文件的恢复 选择项目后右键-->选择Restore from Local history-->出现下面的界面: 勾选后按Restore就恢复了,真的很强大很方便:但我没有就此罢手,我 ...

  9. windows下Redis编译安装

    redis是现在比较流行的noSQL,主流大型网站都用的比较多,很多同学不知道怎么安装,这里介绍在windows下面安装以及扩展,提供学习使用,实际使用环境多在Linux下. 首先到相应网站下载red ...

  10. WPF TextBlock文本纵向排列

    一.将TextBlock文本纵向排列输出有两种模式. 1.文字正常放置,只是纵向排列. 2.文字同样旋转90度,纵向排列. 二.详见下文实例 1.文本正常放置,纵向排列. (1)后台代码 string ...