html canvas 绘图,canvas中可以使用两种方式绘制图像

　　canvas/canvas是HTML5中的新标签，用来画图形。其实这个标签和其他标签一样，特殊之处在于它可以得到一个CanvasRenderingContext2D对象，这个对象可以通过JavaScript脚本来控制绘制。

　　canvas/canvas只是一个绘制图形的容器。除了id，class，style等属性，还有高度和宽度属性。在画布上绘制元素有三个主要步骤：

　　1.获取canvas元素对应的DOM对象，这是一个Canvas对象；

　　2.调用CanvasRenderingContext2D对象的getContext()方法；

　　3.调用CanvasRenderingContext2D对象进行绘制。

　　图形变换

　　平移：上下文。Translate (x，y)，接收参数分别是x轴方向的原点平移x和y轴方向的y。

　　缩放：上下文。Scale (x，y)，接收参数是x轴按x比例缩放，y轴按y比例缩放。

　　旋转：上下文。旋转(角度)，接收参数是坐标轴的旋转角度。

　　需要注意的是，改变图形后，下一次绘图是紧接着上一次的状态，所以如果需要回到初始状态，要使用context . save()；和context . restore()；要保存和恢复当前状态：

　　代码将内容复制到剪贴板var canvas=document . getelementbyid( canvas )；var context=canvas . get context( 2d )；//translate()context . save()；context . fill style= # 1424 de ；context.translate(10，10)；context.fillRect(0，0，200，200)；context . restore()；//scale()context . save()；context . fill style= # f 5270 b ；context.scale(0.5，0.5)；context.fillRect(500，50，200，200)；context . restore()；//rotate()context . save()；context . fill style= # 18 eb0f ；context.rotate(数学。/4)；context.fillRect(300，10，200，200)；context . restore()；效果如下：

　　另外一个和图形变换相关的是：矩阵变换：context.transform (a，b，c，d，e，f，g)。这些参数的含义如下：

　　水平缩放(默认值为1)

　　b水平倾斜(默认值为0)

　　c垂直倾斜(默认值为0)

　　垂直缩放(默认为1)

　　e水平位移(默认为0)

　　f垂直位移(默认为0)

　　读者可以自行验证各个参数的效果，这里就不介绍了。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。