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坐标系转换 中,我们知道了所有的平移缩放旋转操作都会影响到画布坐标系.那在我们对画布进行了一系列操作之后,怎么再知道当前矩阵数据状态呢. 具体代码 首先请看下面的一 ...
随机推荐
- Service-Level Agreement (服务水平协议)
Service-Level Agreement (服务水平协议) SLA是为负载测试场景定义的具体目标.例如,评测脚本中任意数量事务的平均响应时间,可以定义具体的目标或阈值.测试运行结束之后,Load ...
- eclipse 下载安装单元测试log4j的配置与搭建
搭建log4j的具体步骤 1.下载jar包放在lib 拓展库中 百度云下载 地址 链接:https://pan.baidu.com/s/1Cvb22kCJcymORehwhKnCrQ 提取码:b55m ...
- World Finals 2018 感想
垃圾比赛卡我读入卡我输出毁我青春.
- git HEAD detached from origin 问题的解决
这个问题是因为分支选错了,所以说后续的提交都提交到了一个匿名分支之上,整个状态是游离了的 下面说一下我解决问题的步骤 1.查看在游离状态下提交的最新commit号 git branch -v 2.创建 ...
- H5页面测试实战总结
如何判断是否是H5页面: 基本上只要对那个view长按,然后看是不是有反应,比如手机震动(Android).或者出现文字选择粘贴(Android/iOS),那么就是WebView! 横屏竖屏相互切换, ...
- EMI优化
一般印刷电路板之间的高速信号线路无法通过FCC和VDE辐射测试. 优化方案有以下3种: 1.高频滤波 通常做法在每个逻辑驱动器上串联一个小阻抗,并经过一个旁路电容接地. 旁路电容接地需足够干净,如机箱 ...
- Tips_利用padding实现高度可控的分隔线
一.实现分隔线的方法(未理解:不是说span元素垂直方向设置怕padding不影响吗?) html: <div> 登陆<span></span>注册 </di ...
- css边框渐变
在实际开发中,我们经常遇见边框需要背景渐变的实现要求,那么如何去实现呢,今天给大家分享依稀几种情况 1.直角的背景渐变 <!DOCTYPE html> <html lang=&quo ...
- CentOS7搭建SVN服务器
首先,你得有个VPS,我用的是搬瓦工. 安装步骤如下:1.yum install subversion2.查看安装版本 svnserve --version 3.创建SVN版本库目录 mkdir ...
- Python基础 之for循环嵌套实例
一.在控制台中输出以下字符样式: """ ***** ***** *****&qu ...