04 前端学习第一章节 canvas如何被js调用

首先，给canvas标签，写上一个id，然后，通过一个js方法，

document.getElementByID("id-canvas")

把这个方法的结果，传递给某个值。然后这个值，不是变量，是一个对象。

然后这个对象有方法，可以画图，是2d，还是3d

canvas.getContext("2d")

这个context是环境的意思，意思就是，给我们在这个地方里面，建立一个环境，这个环境是2d的，然后，把这个环境，传递给一个变量，下次这个变量，也是一个对象的实例，然后这个实例就可以直接调用画图像的方法。

具体怎么做？

1、把这个canvas，作为参数，传递给一个变量

var canvas = document.getElementById("id-canvas")

var context = canvas.getContext("2d")

最后，这个context如何画图呢？就会使用到，context.drawImage(img,0,0)

但是，在这之前，我们应该，先创建一个图片对象

var img = new Image()

img.src = "paddle.png"

然后，我们要知道，一个onload方法，这个是在html里面的话，onload是写在html标签属性里面的，它的值就是一个js函数，就是载入的时候，他会自动运行。onload，就是加载的意思。

然后，我们如何加载图片，也是类似的方法。

img.onload = function(){
context.drawImage(img,0,0)

}

为什么要用这个写法呢？为什么就不能够直接载入图片，为什么要这么花里胡哨的呢？因为，载入图片，是一个具体的行为，当我们需要载入图片的时候，意思就是，我要载入这个图片，但是，这个图片需要一系列的方法，才能够被我合法载入。因为这个是js，js的行为，就是这样，而属性即使相关联，也是无法直接插入图片的，这个和html的src="paddle.png"方法是不一样的。