JavaScript动画-4

223 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前言

吃饱饭才有力气写代码~

昨天学习了JavaScript通过配合计时器来使用requestAnimationFrame()来达到节流的效果,这些都是偏底层一些的东西,今天学习一下更具体一些的,基础的画布功能。

创建元素时至少要设置其width和height属性,这样才能告诉浏览器在多大面积上绘图。在浏览器不支持元素时,在开始和结束标签中间的内容作为后备数据会显示。如:

<canvas id="drawing" width="200" height="200">A drawing of something</canvas>

和其它元素一样,宽和高的属性也可以在DOM节点上设置,所以可以随时修改。这个元素也可以通过CSS添加样式,并且元素在添加样式或实际绘制内容前不可见。要想在画布上绘制图形,首先得取得绘图上下文,用到的方法是getContext():

let drawing = document.getElementById("drawing");
//确保浏览器支持<canvas>
if(drawing.getContext){
    let context = drawing.getContext("2d");
    //其它代码
}

给这个方法传入的参数是“2d”表示要获取2D上下文对象,并且使用时最好先测试一下getContext()是否存在,有些浏览器对HTML规范中没有的元素会创建默认的HTML元素对象,所以即使这个元素引用有效也不能代表getContext()方法存在,使用前最好测试一下。
可以使用toDataURL()方法导出元素上的图像,这个方法接收一个要生成图像的MIME类型作为参数,比如要从画布上导出一张PNG格式的图片:

let drawing = document.getElementById("drawing");
//确保浏览器支持<canvas>
if(drawing.getContext){
    //取得图像的数据URL
    let imgURL = drawing.toDataURL("image/png");
    //显示图片
    let img = document.createElement("img");
    img.src = imgURL;
    document.body.appendChild(image);
}