Web之旅—— Canvas初探

一、Canvas初探

Canvas是HTML5中的核心技术之一。使用Canvas技术可以绘制图形、图表、动画效果和游戏开发。

二、使用Canvas绘制直线

先来看看canvas如何来使用，可以看到在html页面中添加了canvas元素。宽300px，高400px。如果不指定宽高会怎么样？动手试一试。

1、html页面代码：

2、JavaScript代码：

window.onload=function () {
    //获取canvas对象
    var canvas=document.getElementById("canvas");
    //获取context对象
    var cxt=canvas.getContext("2d");
    //开始绘制直线
    cxt.moveTo(50,50);
    cxt.lineTo(100,200);
    cxt.stroke();
}

三、实验效果

如下图所示的效果，就是利用canvas实现的。也许现在你还很好奇，也有很多不明白的地方，别着急，继续关注，听我一一道来。

示例演示效果

PS：2018年的第一篇博文终于开更了。欢迎小伙伴们对过去一年的关注与支持！