_揽
所得皆所期 所失皆无畏
展开
-
canvas详解10-图形元素交互
isPointInPath()判断路径中是否包含监测点(作为参数传入)。方法 描述 boolean ctx.isPointInPath(x, y) 判断监测点(x,y)是否在路径内 boolean ctx.isPointInPath(x, y, fillRule) 判断监测点(x,y)和路径的位置关系,通过fillRule来决定是路径内还是路径外。fillRule的可选参数是nonzero(非零环绕算法)和evenadd(奇偶环绕算法)原创 2023-06-24 17:02:09 · 568 阅读 · 0 评论 -
canvas详解09-像素操作
到目前为止,我们尚未深入了解 Canvas 画布真实像素的原理,事实上,你可以直接通过 ImageData 对象操纵像素数据,直接读取或将数据数组写入该对象中。稍后我们也将深入了解如何控制图像使其平滑(反锯齿)以及如何从 Canvas 画布中保存图像。原创 2023-06-23 15:09:25 · 378 阅读 · 0 评论 -
canvas详解08-基本动画
由于我们是用 JavaScript 去操控 canvas 对象,这样要实现一些交互动画也是相当容易的。在本章中,我们将看看如何做一些基本的动画。可能最大的限制就是图像一旦绘制出来,它就是一直保持那样了。如果需要移动它,我们不得不对所有东西(包括之前的)进行重绘。重绘是相当费时的,而且性能很依赖于电脑的速度。原创 2023-06-23 15:08:36 · 265 阅读 · 0 评论 -
canvas详解07-裁剪
最重要的区别是裁切路径不会在 canvas 上绘制东西,而且它永远不受新图形的影响。如果我们在创建新裁切路径时想保留原来的裁切路径,我们需要做的就是保存一下 canvas 的状态。裁切路径和普通的 canvas 图形差不多,不同的是它的作用是遮罩,用来隐藏不需要的部分。红边五角星就是裁切路径,所有在路径以外的部分都不会在 canvas 上绘制出来。然后会绘制出 50 颗随机位置分布(经过缩放)的星星,当然也只有在裁切路径里面的星星才会绘制出来。这个例子,我会用一个圆形的裁切路径来限制随机星星的绘制区域。原创 2023-06-23 15:09:47 · 392 阅读 · 0 评论 -
canvas详解06-合成
我们总是将一个图形画在另一个之上,对于其他更多的情况,仅仅这样是远远不够的。比如,对合成的图形来说,绘制顺序会有限制。不过,我们可以利用 globalCompositeOperation 属性来改变这种状况。此外,clip属性允许我们隐藏不想看到的部分图形。这个刮刮乐的案例就需要用到globalCompositeOperation 属性。原创 2023-06-23 15:06:57 · 101 阅读 · 0 评论 -
canvas详解05-变形
每次画圆点,我都以一定夹角来旋转 canvas,而这个夹角则是由环上的圆点数目的决定的。如果不是之前用 save 保存了状态,那么我们就需要手动改变设置来回到前一个状态,这个对于两三个属性的时候还是适用的,一旦多了,我们的代码将会猛涨。举例说,如果我们设置缩放因子是 0.5,1 个单位就变成对应 0.5 个像素,这样绘制出来的形状就会是原先的一半。两个参数都是实数,可以为负数,x 为水平缩放因子,y 为垂直缩放因子,如果比 1 小,会缩小图形,如果比 1 大会放大图形。默认值为 1,为实际大小。原创 2023-06-23 15:06:15 · 318 阅读 · 0 评论 -
canvas详解04-绘制文字
可选的值包括:top, hanging, middle, alphabetic, ideographic, bottom。可选的值包括:start, end, left, right or center. 默认值是 start。将返回一个 TextMetrics对象的宽度、所在像素,这些体现文本特性的属性。在指定的 (x,y) 位置填充指定的文本,绘制的最大宽度是可选的。在指定的 (x,y) 位置绘制文本边框,绘制的最大宽度是可选的。当你需要获得更多的文本细节时,下面的方法可以给你测量文本的方法。原创 2023-06-23 15:05:19 · 1147 阅读 · 0 评论 -
canvas详解03-绘制图像和视频
canvas 更有意思的一项特性就是图像操作能力。可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等。浏览器支持的任意格式的外部图片都可以使用,比如 PNG、GIF 或者 JPEG。你甚至可以将同一个页面中其他 canvas 元素生成的图片作为图片源。我们来看看具体是怎么做的。原创 2023-06-23 15:04:24 · 1279 阅读 · 0 评论 -
canvas详解02-样式和颜色控制
在绘制图形的章节里,我只用到默认的线条和填充样式。而在这一章里,我们将会探讨 canvas 全部的可选项,来绘制出更加吸引人的内容。原创 2023-06-23 14:58:30 · 3644 阅读 · 0 评论 -
canvas详解01-绘制基本图形
既然我们已经设置了 canvas 环境,我们可以深入了解如何在 canvas 上绘制。到本文的最后,你将学会如何绘制矩形,三角形,直线,圆弧和曲线,变得熟悉这些基本的形状。绘制物体到 Canvas 前,需掌握路径,我们看看到底怎么做。原创 2023-06-23 14:57:06 · 3609 阅读 · 0 评论 -
canvas详解00-认识canvas
身为一个WEB开发人员,肯定都是想着能够开发出酷炫和激动人心的应用程序来。可以很多动画特效,例如黑客帝国的数字,彩色炫酷的例子动效。也可以实现各种图画面板,如实现类似于photoshop的web在线图像编辑。各种酷炫的表单等等。原创 2023-06-23 14:57:14 · 197 阅读 · 0 评论