浅谈HTML5中canvas中的beginPath()和closePath()的重要性

beginPath的作用很简单,就是开始一段新的路径,但在使用canvas绘图的过程中却非常重要

先来看一小段代码:

var ctx=document.getElementById("canvas").getContext("2d");ctx.beginPath();ctx.rect(150,150,100,100);ctx.fillStyle="green";ctx.fill();ctx.rect(0,0,100,100);ctx.fillStyle="yellow";ctx.fill();

我们的代码没有错误,但得到的却是两个边长100px的黄色的正方形,而不是一绿一黄,这是为什么呢?

事实上,canvas中的绘制方法(fill,stoke),都会以上一次“beginPath”之后的所有路径进行绘制,在上面的代码中第一个矩形fill了两次,第一次绿色,第二次黄色,所以得到了两个黄色矩形,同样的对于画线段,或其他曲线,图形,不管你moveTo到哪,只要你没有beiginPath,你都是在画一条路径。

如果你画的图形和你想象的不一致,记得查看一下beginPath。


谈到beginPath就不得不提一下closePath,事实上两者并无关系,closePath的意思是关闭路径,不是结束路径,它只是将路径的终点与起点相连,不是开始一个新路径。

我们在上面代码中第一个fill的后面添加一个closePath,得到的仍是两个黄色矩形。

但我们在后面添加一个beginPath,则得到两个不同颜色的矩形。

总而言之,不要试图通过闭合一段路径来开始新的路径,而且如果你不闭合路径,即使开始新的路径,其也不会闭合。

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363951.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML--HTML对象的关于位置和大小的属性的图解

转载于:https://www.cnblogs.com/duadu/archive/2007/08/08/6166687.html

flower.php,flower.php

session_start();//定义个常量,用来授权调用includes里面的文件define(IN_TG,flower);define(IN_JS,flower);//定义个常量,用来指定本页的内容define(SCRIPT,message);//引入公共文件require dirname(__FILE__)./includes/common.inc.php;//判断是否登录…

BABOK - 需求管理和沟通(Requirements Management and Communication)概要

本文更新版本已挪至 http://www.zhoujingen.cn/itbang/345.html ------------------------------------------- 描述 需求管理和沟通描述我们如何管理冲突、问题、变更,并确保涉众和项目团队在方案范围内保持一致。不同项目的复杂度和方法论支持都不一样&#xff0c…

Java 8的默认方法:可以做什么和不能做什么?

什么是默认方法 在Java 8发行版中,您可以修改接口以添加新方法,以便该接口与实现该接口的类保持兼容。 如果您要开发一个库,该库将由基辅到纽约的几位程序员使用,那么这非常重要。 在Java 8出现之前,如果您在库中发布了…

jQuery 打气球小游戏 点击气球爆炸效果

最近在学习前端&#xff0c;看到偶尔看到前端小游戏&#xff0c;就想自己写一个小游戏&#xff0c;奈何水平有限&#xff0c;只能写打气球这种简单的&#xff0c;所有的气球都是动态生成的&#xff0c;气球的颜色也是随机的 html部分 <div class"container"> …

智能提示和那些值得崇拜的人

VisualStudio的智能提示功能越来越强&#xff0c;这为我们提供了很多方便但同时它带来的负面影响最近也一直受到关注。VS的目的是降低开发门槛&#xff0c;这一项他们非常夸张的做到了&#xff0c;之所以说夸张是因为因为它的简单&#xff0c;甚至有逻辑能力欠发达的人成为程序…

P1047 校门外的树

P1047 题目描述 某校大门外长度为L的马路上有一排树&#xff0c;每两棵相邻的树之间的间隔都是1米。我们可以把马路看成一个数轴&#xff0c;马路的一端在数轴0的位置&#xff0c;另一端在L的位置&#xff1b;数轴上的每个整数点&#xff0c;即0,1,2,…,L&#xff0c;都种有一棵…

.Net Core Swagger:Actions require an explicit HttpMethod binding for Swagger 2.0

添加完Swagger包引用后运行报错&#xff1a;Actions require an explicit HttpMethod binding for Swagger 2.0 第一时间想到了父类控制器 没有添加 [HttpPost] 之类的特性 添加后就可以解决这个报错原因 但是我的父类控制器里的两个方法只是为了做返回值的一些处理&#xff0c…

matlab impdt,实验1 基于Matlab的数字信号处理基本操作

图1-7 离散时间信号的基本运算及波形图>>title(x2(n)),axis([-15 15 0 1]) >>subplot(413)>>stem(n3,x,fill),grid on >>title(x3(n)),axis([-15 15 0 1]) >>subplot(414)>>stem(n4,x,fill),grid on >>title(x4(n)),axis([-15 15 0 …

通过Katas进行Java教程:网球比赛(轻松)

编程kata是一种练习&#xff0c;可以帮助程序员通过练习和重复练习来磨练自己的技能。 本文是“通过Katas的Java教程”系列的一部分。 文章分为易&#xff0c;中和难。 Fizz Buzz&#xff08;轻松&#xff09; -Java 7 柏林时钟&#xff08;简易&#xff09; – Java 7和8 …

关于动画的几种状态表示的含义以及能够使用2d动画表述为什么要使用3d动画表述

transform 四种转换 translate 位置scale 缩放rotate 旋转skew 倾斜 以上四种转换方式是比较特殊的&#xff0c;其实他们都是由matrix 矩阵转换来&#xff1b; animation的五种状态 动画速度这些曲线称之为贝塞尔曲线CSS88 这是一个css有关的网站&#xff1b;ease 由快到慢 最…

画函数图形的C#程序(改进版) (转)

我在10月份发表过一篇随笔“画函数图形的C#程序&#xff0c;兼论一个病态函数”&#xff0c;在那篇随笔中写道&#xff1a; 这个画函数图形的C#程序有一个严重的缺点&#xff0c;就是函数表达式是直接写的源程序中的&#xff0c;不能象SciLab和Matlab那样交互式地输入。 后来&a…

Swift-UITextView占位文字及占位文字颜色扩展(可在xib中直接使用)

使用案例 extension UITextView {private struct RuntimeKey {static let hw_placeholderLabelKey UnsafeRawPointer.init(bitPattern: "hw_placeholderLabelKey".hashValue)/// ...其他Key声明}/// 占位文字IBInspectable public var placeholder: String {get {re…

Easy.Ajax 部分源代码, 支持文件上传功能, 兼容所有主流浏览器

下面是Easy.Ajax类的初稿&#xff0c;如须发表&#xff0c;在代码上还要修改以达到最简&#xff0c;但API是不会变了&#xff0c; Easy.Ajax (function (WINDOW) {ajax {proxyPool: {length: function () {var i 0;for (var p in this)i;return i - 1;}},index: 0,clearCach…

Java 8中Lambda表达式的阴暗面

这篇文章可能不会使我成为任何新朋友。 哦&#xff0c;好吧&#xff0c;无论如何我从来没有真正在学校受到欢迎。 但是&#xff0c;让我们说清楚。 就语言而言&#xff0c;Java 8的最大特色无疑是Lambda表达式。 几年来&#xff0c;它一直是功能语言&#xff08;例如Scala和Clo…

复旦大学长跑协会财务制度(初稿)

(一)活动资金来源及主要支出 1、资金主要来源&#xff1a;会费、学校的拨款&#xff0c;私人捐助、企业赞助等。 2、活动性支出&#xff1a;活动宣传、场地租用费、租借多媒体仪器费用及活动经费。事物性支出&#xff1a;协会运作所需物资(如文具等硬件)。 (二)财务报销原则 1、…

JQ实现弹幕效果

JQ实现弹幕效果&#xff0c;快来吐糟你的想法吧 效果图&#xff1a; 代码如下&#xff0c;复制即可使用&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>JQ实现弹幕效果</title><style type"t…

Iterator作用

前言 下面的内容是我从百度知道拷贝出来的&#xff0c;也就不在贴出链接了。我总结下就是迭代器在集合中使用&#xff0c;用户不需要关心具体集合实现的是如何遍历&#xff08;不暴露细节&#xff09;&#xff0c;按照迭代器的方式遍历。 作用 Iterator模式是用于遍历集合类的标…

Django:URL映射

导航 跳转&#xff1a;视图简介 跳转&#xff1a;URL映射 跳转&#xff1a;一、URL中添加参数 跳转&#xff1a;二、指定默认的参数 跳转&#xff1a;三、URL中包含另一个urls模块 跳转&#xff1a;  include函数 跳转&#xff1a;四、path函数 跳转&#xff1a;  自定义ur…

php-v 查看不到版本,解決php -v查看到版本於phpinfo()打印的版本不一致問題

整個事件的起因是這樣的通過git拉取laraevl項目發現缺少.env文件&#xff0c;打算使用composer install生成一個.env文件&#xff0c;然后提示composer最低使用php版本7.1.3而檢測到我的版本為5.4.16。提示如下&#xff1a;然后使用phpinfo打印一下發現版本是7.2.6。打印結果如…