使用canvas绘制图形步骤,html5中的canvas
1. Canvas元素以下html代码定义了一个canvas元素。
XML/HTML代码将内容复制到剪贴板！DOCTYPEhtml html head titlecanvas快速入门/Title metacherset= UTF-8 //head body div canvas ID= main canvas width= 640 height= 480 /canvas/div/body/html通过以下Javascript语句访问画布元素：
代码将内容复制到剪贴板//DOM。写成window . onload=function(){ var canvas=document . getelementbyid( main canvas )；var context=canvas . get context( 2d )；};//jQuery写成$(文档)。ready(function(){ var canvas=$( # main canvas ))；varcontext=canvas.get(0)。get context( 2d )；});//接下来可以调用context的方法来调用绘图API2。基本API
2.1坐标系画布2D渲染上下文采用平面笛卡尔坐标系，左上角为原点(0，0)，坐标系的一个单位相当于屏幕的一个像素。具体数字如下：
2.2绘制基本图形
矩形
代码将内容复制到剪贴板。//绘制填充的矩形context.fillrect (x，y，width，height)//绘制边框矩形context.strokerect (x，y，width，height)//清除矩形区域context.clearrect (x，y，width，height)2.2.2 线条画线用要绘制简单的路径，必须先调用beginPath方法，然后调用moveTo设置路径的起始坐标，再调用lineTo设置线段的结束坐标(可以多次设置)，然后调用closePath完成最后调用stroke绘制轮廓(或者调用fill填充路径)。以下是一些例子：
代码将内容复制到剪贴板//example context . begin path()；//启动路径context.moveTo(40，40)；//移动到point (40，40) context.lineTo(300，40)；//画线到点(300，30) context.lineTo(40，300)；//画线到点(40，300)context . close path()；//End path context . stroke()；//画出轮廓//或者用context.fill()填充；2.2.3 圆形画布其实并没有专门画圆的方法。可以通过画圆弧来模拟圆。既然圆弧是路径，那么画圆弧的API应该包含在beginPath和closePath之间。2.3风格
2.3.1修改线条颜色。
代码将内容复制到剪贴板varcolor//指定RGB值color=rgb(255，0，0)；//指定RGBA值(最后一个参数是alpha值，范围0.0-1.0)color= rgba(255，0，0，1)；//指定十六进制代码color= # FF0000//用单词指定color=red ;//设置填充颜色context.fillStyle=color//设置边框颜色context.strokeStyle=color2.3.2 修改线宽
代码将内容复制到剪贴板//指定线宽值var value=3；//设置边框颜色context.linewidth=value2.4 绘制文本
代码将内容复制到剪贴板//指定字体样式context . font= italic 30 px bold ；//绘制文本context.fillText(Helloworld！)在点(40，40)，40，40)；2.5 绘制图像在绘制图像之前，需要定义图像并加载。
代码将内容复制到剪贴板varimg=new image()；img . src= my image . png ；Img.onload=function(){ //加载并执行图像}；以下是drawImage API解释：
代码将内容复制到剪贴板。//在(x，y)中绘制image image context . Draw image(image，x，y)//绘制image image context . Draw image(image，x，y，width，Height) //在图像的(sx，sy)处捕捉sWidth * sHeight的图像，在(dx，dy)处绘制dWidth*dHeight的图像。DrawImage (image，SX，SY，swidth，sheight，DX，DY，dwidth，dheight) 3。高级功能
3.1让canvas填满浏览器窗口最简单的方法就是将Canvas元素的宽度和高度精确设置为浏览器窗口的宽度和高度，使用CSS消除空白。
CSS代码：
代码将内容复制到剪贴板* { margin:0；填充：0；} html，body { height:100%；宽度：100%；}画布{ display:block；}Javascript代码：
代码将内容复制到剪贴板functionresize canvas(){//canvas Get canvas . attr( width ，$ (window)。获取(0)。inner width)；canvas.attr(height ，$(window)。获取(0)。inner height)；context.fillRect(0，0，canvas.width()、canvas . height())；} $(窗口)。resize(resize canvas)；size canvas()；3.2 绘图状态在canvas中，drawing graph是指描述某一时刻2D渲染上下文外观的一整套属性，包括transformation matrix、crop area、globalAlpha、globalCompositeOperation、strokeStyle、fillStyle、lineWidth、lineCap、lineJoin、miterLimit、shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor、font、textAlign和textBaseline。
当需要改变canvas的全局状态时，一般会先保存当前状态。——调用save方法将状态推入绘图状态堆栈。操作完成后，调用restore方法恢复绘图状态。
代码将内容复制到剪贴板//example context . save()；context.globalAlpha=0.5context.fillRect(0，0，200，100)；context . restore()；3.3变形
3.3.1翻译将2D渲染上下文的原点从一个位置移动到另一个位置。请注意，坐标原点(即全局绘图位置)移动到了这里。该API如下所示：
代码将内容复制到剪贴板//将坐标原点移动到(x，y) context.translate (x，y)3.3.2 缩放
代码将内容复制到剪贴板。//将全局水平和垂直尺寸缩放到x，y倍(即，将原始值乘以倍增因子)context.scale(x，y)3.3.3 旋转
代码使用JavaScript将内容复制到剪贴板//以半径弧度围绕原点旋转画布context.rotate(radius)
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。