Canvas Snippets
==========================================
Example:
1. To revel "fillStyle" property, type "fist" and enter TAB
2. To insert "clearRect()" methods, type "clre" and enter TAB
and so on............
How to Use this CheatSheet:
ctx.method/property - TabTrigger + TAB
Note:
1. The Canvas' Context is set to "ctx" and cannot be changed
2. There are some MISC snippets, take a look at the MISC section
3. If you use Canvas Snippets often, save this file for easy reference
COLOR, STYLE and SHADOW
ctx.fillStyle - fist + TAB
ctx.strokeStyle - stat + TAB
ctx.shadowColor - shco + TAB
ctx.shadowBlur - shbl + TAB
ctx.shadowOffsetX - sox + TAB
ctx.shadowOffsetY - soy + TAB
ctx.createLinearGradient() - clg + TAB
ctx.createRadialGradient() - crg + TAB
ctx.createPattern() - cp + TAB
ctx.addColorStop() - acs + TAB
LINE STYLE
ctx.lineCap - lic + TAB
ctx.lineJoin - lijo + TAB
ctx.lineWidth - liwi + TAB
ctx.miterLimit - mili + TAB
RECTANGLE
ctx.rect() - re + TAB
ctx.fillRect() - fire + TAB
ctx.strokeRect() - stre + TAB
ctx.clearRect() - clre + TAB
PATH
ctx.fill() - fi + TAB
ctx.stroke() - st + TAB
ctx.beginPath() - bepa + TAB
ctx.closePath() - clpa + TAB
ctx.moveTo() - mot + TAB
ctx.lineTo() - lit + TAB
ctx.quadraticCurveTo() - qua + TAB
ctx.bezierCurveTo() - bez + TAB
ctx.arc() - ar + TAB
ctx.arcTo() - art + TAB
ctx.clip() - cl + TAB
ctx.isPointInPath() - ipip + TAB
TRANSFORMATION
ctx.scale() - sc + TAB
ctx.rotate() - ro + TAB
ctx.translate() - trsl + TAB
ctx.transform() - trsf + TAB
ctx.setTransform() - strsf + TAB
TEXT/FONT
ctx.font - fo + TAB
ctx.textAlign - teal + TAB
ctx.textBaseline - teba + TAB
ctx.fillText() - fite + TAB
ctx.strokeText() - stte + TAB
ctx.measureText() - mete + TAB
IMAGE DRAWING
ctx.drawImage() - dr + TAB
PIXAL MANIPULATION
ctx.createImageData() - cid + TAB
ctx.getImageData() - gid + TAB
ctx.putImageData() - pid + TAB
COMPOSITING
ctx.globalAlpha - glal + TAB
ctx.globalCompositeOperation - glco + TAB
OTHER
ctx.save() - sa + TAB
ctx.restore() - res + TAB
ctx.createEvent() - crev + TAB
ctx.getContext() - gco + TAB
ctx.toDataURL() - tdu + TAB
MICS
Height - he + TAB
Width - wi + TAB
Data - da + TAB
HTML BoilerPlate with a Canvas Tag - htmlcan + TAB
Canvas Tag with useful Attributes - cat + TAB
Initialize Canvas and Context - initcan + TAB
Center all Canvas Tags - centcan + Tab
MATH
Math.PI - pi + TAB
Math.random() - rnd + TAB
Math.min() - min + TAB
Math.max() - max + TAB
Math.round() - round + TAB
Math.ceil() - cil + TAB
Math.floor() - flr + TAB
我的文档吗?想要的话可以全部给你.去找出来吧,这里所有的一切都在那里!
Canvas Snippets的更多相关文章
- [OpenCV] Install OpenCV 3.4 with DNN
目标定位 一.开始全面支持 Tensorflow OpenCV3.4 新功能 当前最新进展OpenCV 3.4 dev:https://github.com/opencv/opencv/tree/ma ...
- canvas简介
一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...
- Canvas入门到高级详解(上)
神奇的 canvas--AICODER 全栈培训 IT 培训专家 一.canvas 简介 1.1 什么是 canvas?(了解) 是 HTML5 提供的一种新标签 <canvas>< ...
- 第157天:canvas基础知识详解
目录 一.canvas简介 1.1 什么是canvas?(了解) 1.2 canvas主要应用的领域(了解) 二.canvas绘图基础 2.0 sublime配置canvas插件(推荐) 2.1 Ca ...
- Dom vs Canvas (译)
原文:dom_vs_canvas 在web上做动画我们有很多选择:svg,dom,canvas,flash等等.但是根据业务场景我们一定能找到最优的技术解决方案,但是何时选择dom,何时使用canva ...
- html5 canvas常用api总结(三)--图像变换API
canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...
- 【探索】利用 canvas 实现数据压缩
前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...
- 简单入门canvas - 通过刮奖效果来学习
一 .前言 一直在做PC端的前端开发,从互联网到行业软件.最近发现移动端已经成为前端必备技能了,真是不能停止学习.HTML5新增的一些东西,canvas是用的比较多也比较复杂的一个,简单的入门了一下, ...
- 获取Canvas当前坐标系矩阵
前言 在我的另一篇博文 Canvas坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...
随机推荐
- Python学习(四十)—— Djago之认证系统
一.COOKIE 与 SESSION 概念 cookie不属于http协议范围,由于http协议无法保持状态,但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生. cook ...
- 导入Maven 工程pom.xml首行报错解决方法
1.利用IDE导入一个Maven工程,但是pom.xml文件首行报错,发现是maven版本需要升级 2.在pom.xml文件 增加配置 <properties> <maven-jar ...
- SpringCloud教程 | 第三篇: 服务消费者(Feign)
上一篇文章,讲述了如何通过RestTemplate+Ribbon去消费服务,这篇文章主要讲述如何通过Feign去消费服务.一.Feign简介 Feign是一个声明式的伪Http客户端,它使得写Http ...
- django——会话追踪技术
1.引言 1.1什么是会话追踪技术 会话是指一个终端用户(服务器)与交互系统(客户端)进行通讯的过程. 1.2 什么是会话跟踪 对同一个用户对服务器的连续的请求和接受响应的监视.(将用户与同一用户发出 ...
- ubantu10.04安装ns-2.34
LQ大神说是这个搭配才能完美移植leach 安装如下: 1. 安装必须的软件,因为版本较久远, sudo gedit /etc/apt/sources.list(大概是个意思) 把里面的内容换成: d ...
- phantomjs 中文文档
phantomjs 中文文档 转载 入门教程:转载 http://www.cnblogs.com/front-Thinking/p/4321720.html 1.介绍 简介 PhantomJS是一 ...
- 问题11:web前端开发规范手册(转)
一.规范目的 1.1 概述 ..................................................................................... ...
- .NET平台常用的框架
转自:https://www.cnblogs.com/lhxsoft/p/8609089.html 分布式缓存框架: Microsoft Velocity:微软自家分布式缓存服务框架. Memcahe ...
- jexus System.BadImageFormatException Details: Non-web exception. Exception origin (name of application or object): App_global.asax_ai3fjolq.
Application ExceptionSystem.BadImageFormatExceptionInvalid method header format 0Description: HTTP 5 ...
- vue中打包后vendor文件包过大
vue中webpack打包后vendor.xxx.js文件一般都特别大,其原因是因为我们引用的依赖都被压缩成一个js文件,这样会导致vendor文件过大.页面加载速度过慢,影响用户体验.所以我们就要把 ...