example.js 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. const example = {}
  2. example.rotate = function (context) {
  3. context.beginPath()
  4. context.rotate((10 * Math.PI) / 180)
  5. context.rect(225, 75, 20, 10)
  6. context.fill()
  7. }
  8. example.scale = function (context) {
  9. context.beginPath()
  10. context.rect(25, 25, 50, 50)
  11. context.stroke()
  12. context.scale(2, 2)
  13. context.beginPath()
  14. context.rect(25, 25, 50, 50)
  15. context.stroke()
  16. }
  17. example.reset = function (context) {
  18. context.beginPath()
  19. context.setFillStyle('#000000')
  20. context.setStrokeStyle('#000000')
  21. context.setFontSize(10)
  22. context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)')
  23. context.setLineCap('butt')
  24. context.setLineJoin('miter')
  25. context.setLineWidth(1)
  26. context.setMiterLimit(10)
  27. }
  28. example.translate = function (context) {
  29. context.beginPath()
  30. context.rect(10, 10, 100, 50)
  31. context.fill()
  32. context.translate(70, 70)
  33. context.beginPath()
  34. context.fill()
  35. }
  36. example.save = function (context) {
  37. context.beginPath()
  38. context.setStrokeStyle('#00ff00')
  39. context.save()
  40. context.scale(2, 2)
  41. context.setStrokeStyle('#ff0000')
  42. context.rect(0, 0, 100, 100)
  43. context.stroke()
  44. context.restore()
  45. context.rect(0, 0, 50, 50)
  46. context.stroke()
  47. }
  48. example.restore = function (context) {
  49. [3, 2, 1].forEach(function (item) {
  50. context.beginPath()
  51. context.save()
  52. context.scale(item, item)
  53. context.rect(10, 10, 100, 100)
  54. context.stroke()
  55. context.restore()
  56. })
  57. }
  58. example.drawImage = function (context) {
  59. context.drawImage('/image/wechat.png', 0, 0)
  60. }
  61. example.fillText = function (context) {
  62. context.setStrokeStyle('#ff0000')
  63. context.beginPath()
  64. context.moveTo(0, 10)
  65. context.lineTo(300, 10)
  66. context.stroke()
  67. // context.save()
  68. // context.scale(1.5, 1.5)
  69. // context.translate(20, 20)
  70. context.setFontSize(10)
  71. context.fillText('Hello World', 0, 30)
  72. context.setFontSize(20)
  73. context.fillText('Hello World', 100, 30)
  74. // context.restore()
  75. context.beginPath()
  76. context.moveTo(0, 30)
  77. context.lineTo(300, 30)
  78. context.stroke()
  79. }
  80. example.fill = function (context) {
  81. context.beginPath()
  82. context.rect(20, 20, 150, 100)
  83. context.setStrokeStyle('#00ff00')
  84. context.fill()
  85. }
  86. example.stroke = function (context) {
  87. context.beginPath()
  88. context.moveTo(20, 20)
  89. context.lineTo(20, 100)
  90. context.lineTo(70, 100)
  91. context.setStrokeStyle('#00ff00')
  92. context.stroke()
  93. }
  94. example.clearRect = function (context) {
  95. context.setFillStyle('#ff0000')
  96. context.beginPath()
  97. context.rect(0, 0, 300, 150)
  98. context.fill()
  99. context.clearRect(20, 20, 100, 50)
  100. }
  101. example.beginPath = function (context) {
  102. context.beginPath()
  103. context.setLineWidth(5)
  104. context.setStrokeStyle('#ff0000')
  105. context.moveTo(0, 75)
  106. context.lineTo(250, 75)
  107. context.stroke()
  108. context.beginPath()
  109. context.setStrokeStyle('#0000ff')
  110. context.moveTo(50, 0)
  111. context.lineTo(150, 130)
  112. context.stroke()
  113. }
  114. example.closePath = function (context) {
  115. context.beginPath()
  116. context.moveTo(20, 20)
  117. context.lineTo(20, 100)
  118. context.lineTo(70, 100)
  119. context.closePath()
  120. context.stroke()
  121. }
  122. example.moveTo = function (context) {
  123. context.beginPath()
  124. context.moveTo(0, 0)
  125. context.lineTo(300, 150)
  126. context.stroke()
  127. }
  128. example.lineTo = function (context) {
  129. context.beginPath()
  130. context.moveTo(20, 20)
  131. context.lineTo(20, 100)
  132. context.lineTo(70, 100)
  133. context.stroke()
  134. }
  135. example.rect = function (context) {
  136. context.beginPath()
  137. context.rect(20, 20, 150, 100)
  138. context.stroke()
  139. }
  140. example.arc = function (context) {
  141. context.beginPath()
  142. context.arc(75, 75, 50, 0, Math.PI * 2, true)
  143. context.moveTo(110, 75)
  144. context.arc(75, 75, 35, 0, Math.PI, false)
  145. context.moveTo(65, 65)
  146. context.arc(60, 65, 5, 0, Math.PI * 2, true)
  147. context.moveTo(95, 65)
  148. context.arc(90, 65, 5, 0, Math.PI * 2, true)
  149. context.stroke()
  150. }
  151. example.quadraticCurveTo = function (context) {
  152. context.beginPath()
  153. context.moveTo(20, 20)
  154. context.quadraticCurveTo(20, 100, 200, 20)
  155. context.stroke()
  156. }
  157. example.bezierCurveTo = function (context) {
  158. context.beginPath()
  159. context.moveTo(20, 20)
  160. context.bezierCurveTo(20, 100, 200, 100, 200, 20)
  161. context.stroke()
  162. }
  163. example.setFillStyle = function (context) {
  164. ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
  165. context.setFillStyle(item)
  166. context.beginPath()
  167. context.rect(0 + 75 * index, 0, 50, 50)
  168. context.fill()
  169. })
  170. }
  171. example.setStrokeStyle = function (context) {
  172. ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
  173. context.setStrokeStyle(item)
  174. context.beginPath()
  175. context.rect(0 + 75 * index, 0, 50, 50)
  176. context.stroke()
  177. })
  178. }
  179. example.setGlobalAlpha = function (context) {
  180. context.setFillStyle('#000000');
  181. [1, 0.5, 0.1].forEach(function (item, index) {
  182. context.setGlobalAlpha(item)
  183. context.beginPath()
  184. context.rect(0 + 75 * index, 0, 50, 50)
  185. context.fill()
  186. })
  187. }
  188. example.setShadow = function (context) {
  189. context.beginPath()
  190. context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)')
  191. context.rect(10, 10, 100, 100)
  192. context.fill()
  193. }
  194. example.setFontSize = function (context) {
  195. [10, 20, 30, 40].forEach(function (item, index) {
  196. context.setFontSize(item)
  197. context.fillText('Hello, world', 20, 20 + 40 * index)
  198. })
  199. }
  200. example.setLineCap = function (context) {
  201. context.setLineWidth(10);
  202. ['butt', 'round', 'square'].forEach(function (item, index) {
  203. context.beginPath()
  204. context.setLineCap(item)
  205. context.moveTo(20, 20 + 20 * index)
  206. context.lineTo(100, 20 + 20 * index)
  207. context.stroke()
  208. })
  209. }
  210. example.setLineJoin = function (context) {
  211. context.setLineWidth(10);
  212. ['bevel', 'round', 'miter'].forEach(function (item, index) {
  213. context.beginPath()
  214. context.setLineJoin(item)
  215. context.moveTo(20 + 80 * index, 20)
  216. context.lineTo(100 + 80 * index, 50)
  217. context.lineTo(20 + 80 * index, 100)
  218. context.stroke()
  219. })
  220. }
  221. example.setLineWidth = function (context) {
  222. [2, 4, 6, 8, 10].forEach(function (item, index) {
  223. context.beginPath()
  224. context.setLineWidth(item)
  225. context.moveTo(20, 20 + 20 * index)
  226. context.lineTo(100, 20 + 20 * index)
  227. context.stroke()
  228. })
  229. }
  230. example.setMiterLimit = function (context) {
  231. context.setLineWidth(4);
  232. [2, 4, 6, 8, 10].forEach(function (item, index) {
  233. context.beginPath()
  234. context.setMiterLimit(item)
  235. context.moveTo(20 + 80 * index, 20)
  236. context.lineTo(100 + 80 * index, 50)
  237. context.lineTo(20 + 80 * index, 100)
  238. context.stroke()
  239. })
  240. }
  241. module.exports = example