canvas的方法有哪些,canvas作用
1.油画中文教程https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial
2.画布的默认宽度和高度分别为300和150。为了避免异常，最好通过使用显示属性而不是css来添加宽度和高度。
3.为不支持canvas标签内部的canvas标签的浏览器添加说明。
4.也可以通过下面的js代码判断浏览器是否支持画布复制代码。代码如下：
var canvas=document . getelementbyid( tutorial )；
if (canvas.getContext){
var CTX=canvas . get context( 2d )；
//在此绘制代码
}否则{
//canvas-此处有不受支持的代码
}
5.canvas只支持一种基本形状的绘制，即矩形，但其他图形可以通过canvas path绘制。
6.有四个绘制矩形的函数：rect、fillRect、strokeRect和clearRect。
7.beginPath的作用是启动一个新的路径层。如果没有添加，就意味着在原来的路径图层上绘制。下面两个代码有完全不同的效果。第一个代码显示两条红线，第二个代码显示一条黑线和一条红线。按如下方式复制代码：
var CTX=document . getelementbyid( CVS )。get context( 2d )；
CTX . begin path()；
ctx.moveTo(100.5，20.5)；
ctx.lineTo(200.5，20.5)；
CTX . stroke()；
ctx.moveTo(100.5，40.5)；
ctx.lineTo(200.5，40.5)
ctx.strokeStyle= # f00
CTX . stroke()；复制代码如下：
var CTX=document . getelementbyid( CVS )。get context( 2d )；
CTX . begin path()；
ctx.moveTo(100.5，20.5)；
ctx.lineTo(200.5，20.5)；
CTX . stroke()；
CTX . begin path()；
ctx.moveTo(100.5，40.5)；
ctx.lineTo(200.5，40.5)
ctx.strokeStyle= # f00
CTX . stroke()；
8.如果不需要关闭路径，就不需要使用closePath。如果使用fill，路径会自动关闭，所以不再需要使用closePath。
9.只要你有足够的耐心，你可以用贝塞尔曲线画出任何图形。
10.二次曲线在Firefox中有bug，可以用三次曲线代替二次曲线。
1.图片(如PNG、GIF、JPEG等。)可以引入canvas，其他canvas元素也可以作为图片的来源。
12.下面是基本的画布绘制代码，其中image是一个图像或画布对象，X和Y是它在目标画布中的起始坐标。
drawImage(图像，x，y)
下面的代码指示缩放图片，宽度和高度指示缩放后的大小。
drawImage(图像，x，y，宽度，高度)
下面的代码显示了一个剪切的图片。第一个参数与其他参数相同，它是一个图像或另一个画布的引用。其他八个参数分别表示图片中裁剪的初始X坐标、图片中裁剪的初始Y坐标、裁剪区域的宽度、裁剪区域的高度、绘制位置X坐标、绘制位置Y坐标、绘制图形的宽度、绘制图形的高度、裁剪区域的大小可以与绘制图形的大小不同，此时会缩放到绘制图形的大小。
drawImage(图像，sx，sy，sWidth，sHeight，dx，dy，dWidth，dHeight)
13.strokeStyle用于设置图形轮廓的颜色，fillStyle用于设置填充颜色。颜色可以是表示CSS颜色值的字符串、渐变对象或图案对象。默认情况下，线条和填充颜色为黑色(CSS颜色值#000000)。
14.图像透明度可以用globalAlpha=透明度值或rgba颜色值来表示。
15.lineWidth属性设置当前线条的粗细。为了解决1px线宽bug，采用0.5的方法。
16.lineCap属性最左边的一行使用默认的对接。你可以注意到它与辅助线齐平。中间是圆形的效果，终点加一个半径为线宽一半的半圆。右边是正方形效果，末端是一个等宽半宽的正方形。
17.lineJoin属性这里我也是以三条折线为例，分别设置不同的lineJoin值。最上面的是圆形的效果。角是圆的，圆的半径等于线宽。而中间最下面的分别是斜角和斜接的效果。当值为miter时，线段将延伸到关节外，直到穿过一个点，延伸效果受到下面要介绍的miterLimit属性的限制。
18.保存和恢复方法用于保存和恢复画布的状态，它们都没有参数。画布的状态是应用于当前图片的所有样式和变形的快照。画布状态保存为堆栈。每次调用save方法时，当前状态将被推入堆栈并保存。每次调用restore方法时，都会从堆中弹出上次保存的状态，所有设置都会被恢复。
19.transform(1，0，0，1，0，0)参数分别表示水平缩放、水平旋转(顺时针)、垂直旋转(逆时针)、垂直缩放、水平偏移和垂直偏移。
SetTransform(1，0，0，1，0，0)表示重置之前的变换矩阵，然后构建一个新的。参数同上。
旋转(角度)，(一个半径等于1弧度，2r/r=弧度，即360=2，即1=/180)
20.动画实际上意味着不断清空画板(clearRect())，然后重新绘制。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。