h5--新增标签详细的学习--canvas！！！

1.canvas简单绘制一个框，注意给canvas加专属id，用来定义样式css。

<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>

2.简单图形的绘制：

其实canvas不能画图，它只是画布，画布框，相当于table，form，ol，li一样，只是一个外框。

绘制工作通过javascript脚本实现。添加图形，绘画

a.添加一个画布，制定id值。

b.在脚本中写东西

var c=document.getElementById("myCanvas");        <!-- 获取指定id的画布-->
var context = c.getContext("2d");        <!-- getcontext获取上下，文创建一个context对象来获取允许进行绘制的2d环境  返回一个内建的对象，使用这个对象可以进行绘图 -->
<!--然后调用context方法进行绘制-->

代码：

<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");		<!-- 获取指定id的画布-->
var context = c.getContext("2d");		<!-- getcontext获取上下，文创建一个context对象来获取允许进行绘制的2d环境  返回一个内建的对象，使用这个对象可以进行绘图 -->
<!--然后调用context方法进行绘制-->
context.fillStyle="#ff00ff";
context.fillRect(50,25,100,50);<!--然后调用context方法进行绘制矩形前为坐标（50,25） 长宽 100 50 -->
</script>
</body>

结果：

 

3.认识canvas坐标：