首页 计算机科学 前端 杂谈

# 动画与 canvas 图形

  • 使用 requestAnimationFrame

  • 理解 <canvas> 元素

  • ・绘制出简单的 2dtupian

    • ​ 使用 webGL 绘制 3d 图形

# requestAnimationsFrame 的使用

1
2
3
4
5
6
7
8
9
function updateProgress(){
var div=document.getElementById("status")
div.style.width=(parseInt(div.style.width,10)+5)+"%"
    if(div.style.left!="100%")
        {
            requestAnimationsFrame(updateProgress);
        }
}
requestAnimationsFrame(updateProgress);

因为 requestAnimationsFrame（）只会调用一次传入的函数，所以每次更新用户界面时需要再手动调用一次，同样，也需要控制动画何时停止。结果就会得到非常平滑的动画。

requestAnimationsFrame () 可以接收一个参数，此参数是一个 DOMHighResTimestamp 的实例（比如 performance.now () 返回的值），表示下次重绘的时间。这一点很重要：requestAnimationsFrame () 实际上把重绘任务安排在了未来一个已知的时间点上，而且通过这个参数告诉了开发者。基于这个参数，就可以更好的决定如何调优动画了。

# cancelAnimationFrame

requestsAnimationFrame（）会返回一个 id 值，类似于 settimeout（）函数。cancelAnimationFrame（）这个函数可以取消掉 requestsAnimationFrame（）的重绘任务。

# 基本的画布功能

创建 <canvas> 元素时至少要设置其 width 和 height 属性，这样才能告诉浏览器在多大面积上绘图。出现在开始和结束标签之间的内容时后备数据，会再浏览器不支持 < canvas > 元素时显示。比如：

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

要在画布上绘制图形，需要给这个方法传入参数 "2d", 表示要获取 2D 上下文对象：

1
2
3
4
5
6
let drawing=document.getElememtById("drawing");
//确保浏览器是支持canvas的
if(drawing.getContext)
{
let context=drawing.getContext("2d");
}

可以使用 toDataURL（）方法导出 <canvas> 元素上的图像。这个方法接受一个参数，要生成图像的 mime 类型（与用来创建图形的上下文无关）。例如，要从画布上导出一样 png 格式的图片，可以这样做：

1
2
3
4
5
6
7
8
9
10
11
12
let drawing=domcument.getElementById("drawing")
//确保浏览器是支持canvas的
if(drawing.getContext)
    {
        //使用toDataURL来获取图像为mime类型的
        let imageURl=drawing.toDataURL("image/png")
        //创建img标签
        let image=domcument.createElement("img");
        image.src=imageURl
        //将创建的img的dom节点添加到body下面
        document.body.appendChild(image)
    }

浏览器会默认图像编码为 png 格式。

# 2D 绘制上下文

2D 绘制上下文提供了绘制 2D 图形的方法，包括矩形、弧形和路径。2D 上下文的坐标原点（0，0）再 <canvas> 元素的左上角。所有坐标值都相对于该点计算，因此 x 坐标向右增长，y 坐标向下增长。默认情况下，width 和 height 表示两个方向上像素的最大值。

# 填充和描边

如何想要实现填充和描边就要用到两个 canvas 的方法，fillStyle 和 strokeStyle

l

1
2
3
4
5
6
7
let drawing=document.getElementById("drawing")
if(drawing.getContext)
    {
        let context=drawing.getContext("2d")
        context.fillStyle="red";
        context.strokeStyle="#fff"
    }

# 绘制矩形

举行是唯一一个可以直接在 2D 绘图上下文绘制的图像，与绘制矩形有关的方法有三个：fillRect (),strokeRect (), 和 clearRect（）。这些方法都可以接收 4 个参数：矩形 x 坐标，矩形 y 坐标，矩形宽度和矩形长度。

1
2
3
4
5
6
7
8
9
10
11
12
let drawing=document。getElementById("drawing")
if(drawing.getContext)
{
const context=drawing.getContext("2d")
//绘制红色矩形    
	context.fillStyle="red"
    context.fillRect(10,10,20,20)
    //绘制半透明蓝色矩形
    context.fillStyle("rgba(0,0,255,0.5)")
    context.fillRect(30,30,50,50)
    
}

stokeRect () 方法使用通过 stokeStyle 属性指定的颜色绘制矩形轮廓。下面是一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
let drawing=document。getElementById("drawing")
if(drawing.getContext)
{
const context=drawing.getContext("2d")
//绘制红色轮廓矩形    
	context.strokeStyle="red"
    context.strokeRect(10,10,20,20)
    //绘制半透明蓝色矩形
    context.strokeStyle("rgba(0,0,255,0.5)")
    context.strokeRect(30,30,50,50)
    
}

使用 clearRect（）可以使矩形变成透明。