canvas
meahu
为什么?
展开
-
玩转html5 canvas
1、前言 <canvas></canvas>是html5出现的新标签,像所有的dom对象一样它有自己本身的属性、方法和事件,其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。 2、基本知识context:一直觉得这个翻译成“上下文”真够蛋疼的,context是一个封装了很多绘图功能的对象,获取这个对象的转载 2016-06-24 11:06:06 · 802 阅读 · 0 评论 -
canvas 状态的保存和恢复 Saving and restoring state
在了解变形之前,我先介绍一下两个在你开始绘制复杂图形就必不可少的方法:save()、restore(),save 和 restore 方法是用来保存和恢复 canvas 状态的,都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。Canvas 状态是以堆(stack)的方式保存的,每一次调用 save 方法,当前的状态就会被推入堆中保存起来。这种状态包括:strokeStyl转载 2016-06-21 10:07:48 · 746 阅读 · 0 评论 -
canvas 变形记——移动、旋转、缩放、变形
canvas 有几个变形形式:移动、旋转、缩放、变形。在做变形之前先保存状态是一个良好的习惯。大多数情况下,调用 restore 方法比手动恢复原先的状态要简单得多。又,如果你是在一个循环中做位移但没有保存和恢复 canvas 的状态,很可能到最后会发现怎么有些东西不见了,那是因为它很可能已经超出 canvas 范围以外了。1、移动 Translate translate用来移动 canvas 和它转载 2016-06-21 14:41:51 · 4773 阅读 · 0 评论 -
canvas globalCompositeOperation
globalCompositeOperation 可以在已有图形后面再画新图形,还可以用来遮盖,清除(比 clearRect 方法强劲得多)某些区域。 使用:globalCompositeOperation = type; 效果图如下: 不知为什么,source-in、source-atop 效果没出来 不知为什么,destination-in、destination-out 效果没出来转载 2016-06-21 16:01:26 · 1121 阅读 · 1 评论 -
canvas 裁切路径 Clipping paths
裁切路径和普通的 canvas 图形差不多,不同的是它的作用是遮罩,用来隐藏没有遮罩的部分。和 globalCompositeOperation 属性作一比较,它可以实现与 source-in 和 source-atop 差不多的效果。最重要的区别是裁切路径不会在 canvas 上绘制东西,而且它永远不受新图形的影响。这些特性使得它在特定区域里绘制图形时相当好用。clip() 我们用 clip 方法转载 2016-06-21 18:25:31 · 718 阅读 · 0 评论 -
canvas 常用方法
beginPath() 新建一条路径,生成之后,图形绘制命令被指向到路径上生成路径。 closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。stroke() 用线条绘制图形轮廓。 fill() 填充路径的内容区域生成实心的图形。moveTo(x, y) 将笔触移动到指定的坐标 (x, y) lineTo(x, y) 绘制从当前位置到指定位置 (x, y) 的直线。arc(x,原创 2016-06-22 15:06:38 · 1600 阅读 · 0 评论