html5 的基础理解1

在w3c中是这样写有关与canvas的：canvas拥有多种绘制路径、圆形、字符、以及添加图像的方法。

    <html><head>
    <title>标题</title>
    </head>
    <body><canvas id="myCanvas" width="800" height="200"></canvas>
    <script type="text/javascript">
	var driver = document.getElementById("myCanvas");
	
	var cxt = driver.getContext("2d");
	
	cxt.moveTo(10,10);
	cxt.lineTo(150,50);
	cxt.lineTo(10,50);
	cxt.stroke();
    </script>
    </body>
    </html>

该代码的据方法就是画一个直线。（可以自己尝试一下）

其中的我的代码中的var driver的含义是定义一个变量，通过document.getElementById的方法获取到canvas(个人理解这个就是一个画布).

driver.getContext()的方法的含义就是设置一个二维的绘图方式

cxt.moveTo(xxx,xxx);其含义是在一个平面上设置一个点，以该店为坐标起点。之后向任意一个方向发射出去。

cxt.lineTo的含义是以上一个点为起点，下一个点为lineTo()括号中的内容。

posted @ 2017-05-17 18:12  xingchen95  阅读(193)  评论(0)  编辑  收藏  举报