Canvas Snippets

6 篇文章 0 订阅

\small Package Control Messages

==========================================

\small Canvas Snippets


\small Below is a list of all the methods and properties of the Canvas' Context followed by its respective tabtrigger.

 


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

文档传送门

                                                                                                                                                                \small By \ \ Nidhogg\cdot D\cdot Joking

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值