Question

希望使用coffeescript操作html5画布。

寻找jQuery的模拟beginPath()，但我无法在互联网上找到它。

如何在coffeescript中使用beginPath()？谢谢你的任何想法！

Answer 1

这是一个例子＆＃34;生命的种子＆＃34;来自（http://autotelicum.github.io/Smooth-CoffeeScript/interactive/interactive-coffeescript.html）

webdesign = -> 
  doctype 5
  html ->
    head ->
      meta charset: 'utf-8'
      title 'My drawing | My awesome website'
      style '''
        body {font-family: sans-serif}
        header, nav, section, footer {display: block}
      '''
      coffeescript ->
        draw = (ctx, x, y) ->
          circle = (ctx, x, y) ->
            ctx.beginPath()
            ctx.arc x, y, 100, 0, 2*Math.PI, false
            ctx.stroke()
          ctx.strokeStyle = 'rgba(255,40,20,0.7)'
          circle ctx, x, y
          for angle in [0...2*Math.PI] by 1/3*Math.PI
            circle ctx, x+100*Math.cos(angle),
                        y+100*Math.sin(angle)
        window.onload = ->
          canvas = document.getElementById 'drawCanvas'
          context = canvas.getContext '2d'
          draw context, 300, 200
    body ->
      header -> h1 'Seed of Life'
      canvas id: 'drawCanvas', width: 550, height: 400

Answer 2

beginPath不是window上的方法，因此您无法在JavaScript或CoffeeScript中调用beginPath()（当然也不能在jQuery中调用）。相反，beginPath是HTML Canvas上下文中的方法。您可以通过选择您关心的画布来访问上下文：

canvas = document.getElementsByTagName('canvas')[0]

您需要访问索引[0]以确保您正在处理HTML Canvas本身，而不是jQuery对象或NodeList。然后您可以访问其上下文：

ctx = canvas.getContext '2d'

您想要做的任何绘图都需要从上下文对象（例如ctx.beginPath()）

完成

Coffeescript中的beginPath（）？

2 个答案: