html canvas开发详解,canvas常用API
画布可以画出许多奇妙的风格和美丽的效果。它可以通过几个简单的API在画布上呈现出千变万化的效果，还可以制作网页游戏。接下来总结一下画图相关的API。
画画时，画布相当于画布，语境相当于画笔。
1.绘制线条
移动(x0，y0):将当前画笔(ictx)移动到位置(x0，y0)。
LineTo(x1，y1):从当前位置(x0，y0)到(x1，y1)画一条直线。
BeginPath():打开一个路径或重置当前路径。
ClosePath():从当前点到路径的起点，即上一个beginPath、avoidance和Path的位置。
Stroke (): draw。你要加这个功能才能画图，所以这个一定在最后。
var Ican vas=document . getelementbyid( Ican vas )；var ictx=Ican vas . get context( 2d )；ictx . begin path()；ictx.moveTo(0，0)；ictx.lineTo(300，150)；ictx . line to(3150)；ictx . close path()；ictx . stroke()；效果：
这里要注意的是，如果closepath放在stroke函数之后，就不会画成闭合线，因为在闭合之前，已经画过了，所以左边的直线就不画了。
2.线条样式
线帽：线头样式，平头，圆形，方形。
LineJoin:两条线相交时的拐点样式。当设置为斜接时，也可以通过斜接设置拐点交点的最大长度。
miterLimit:如果斜接长度超过miter limit值，拐角将显示在“斜角”类型的线连接中。
线宽：线宽
StrokeStyle:线条颜色，渐变(定义的渐变对象)，模式。context.strokeStyle= # 333
var Ican vas=document . getelementbyid( Ican vas )；var ictx=Ican vas . get context( 2d )；ictx . begin path()；ictx . stroke style= # 0000 ff ；ictx.lineWidth=20ictx.lineCap= roundictx.moveTo(10，10)；ictx.lineTo(80，80)；ictx . stroke()；ictx . begin path()；//必须在此处开始路径，否则将总是基于第一个路径进行对话。最后一笔，你再画一条黑斜线，一共3行。ictx.strokeStyle= # 000000ictx.lineCap= buttictx.lineWidth=10ictx.moveTo(80，10)；ictx.lineTo(10，80)；ictx . stroke()；BeginPath和closePath可以成对出现，它们之间几乎没有关系。closePath用于闭合终点和起点，以绘制闭合路径。
3.绘制曲线
Arc (X，Y，radius，startAngle，end angle，逆时针):画一条曲线，radius是曲线的半径，start angle和endAngle的起始角和结束角，以及弧度(数学。PI/180)*角度值，逆时针画方向；
ArcTo(x1，y1，x2，y2，半径):在两条切线之前绘制曲线。
ictx . begin path()；ictx.moveTo(20，20)；//创建起点ictx.lineTo(100，20)；//创建水平线ictx.arcTo(150，20，150，70，50)；//创建arc ictx.lineTo(150，120)；//创建竖线ictx . stroke()；曲线的起点和水平线的终点与第一设定点的直线相切，曲线的终点和第一设定点的直线与第二设定点的直线相切。
QuadraticCurveTo(x1，y1，x2，y2):二次贝塞尔曲线。控制点的(x1，y1)坐标和终点的(x2，y2)坐标。
BezierCurveTo(x1，y1，x2，y2，x，y):三次贝塞尔曲线。(x1，y1)控制点1的坐标，(x2，y2)控制点2的坐标(x，y)终点的坐标。
贝塞尔曲线在绘制一些非常平滑的曲线时非常有用。
4.绘制矩形及填充
Rect():创建一个矩形；
Rect (x，y，width，height):绘制填充矩形：(x，y)起点、宽度、高度矩形宽度和高度
Stroke():绘制一个矩形线框
ClearRect():清除矩形。
ictx . fill style= # 0000 ff ；//设置填充颜色ictx.fillRect(20，20，150，100)；ictx.strokeRect(180，20，100，100)；5.画笔属性
FillStyle:设置填充的颜色、渐变或图案(patten)；
StrokeStyle:画笔的颜色、渐变或图案。
6.绘制阴影
阴影颜色：阴影颜色
阴影模糊：模糊级别
ShadowOffsetX:阴影的水平距离
阴影的垂直距离
ictx.shadowBlur=20ictx.shadowColor= # 456ictx . shadowoffsetx=-10；ictx.shadowOffsetY=30//在绘制矩形ictx.fillStyle=#108997 之前设置阴影；ictx.fillRect(20，20，100，80)；ictx . stroke()；
7.绘制渐变
CreateGradient (x1，y1，x2，y2):绘制线性渐变，(x1，y1)是渐变的起点，(x2，y2)是渐变的终点。可以在不同的位置形成垂直或水平梯度。
CreateRadialgradient (x1，y1，r1，x2，y2，r2):径向渐变：(x1，y1)为渐变起点的中心，R1为半径，(x2，y2)为渐变终点，R2为终点半径；
两种梯度都需要使用。
AddColorStop(Stop，color)设置渐变过程，stop是0.0到1.0之间的值。
var grd=ictx . createlanegradient(0，0，170，0)；grd.addColorStop(0， # 000 )；grd.addColorStop(0.5， 378923 )；grd.addColorStop(1， # DDD )；ictx.fillStyle=grd//这里的gradient是一个用来将值ictx.fillRect(20，20，150，100)传递给fillstyle的对象；var grd=ictx . createradialgradient(300，225，15，250，225，100)；grd.addColorStop(0， 345 )；grd.addColorStop(1， # fff )；ictx.fillStyle=grdictx.fillRect(200，150，150，100)；
8.填充背景
Create Pattern (image， repeat repeat-x repeat-y no-repeat ):Image是一个图片对象，以下参数用于设置图片的重复模式。
9.其他相关API
Fill():填充当前路径。
isPointInPath():ictx . isPointInPath(x，y)；确定该点是否位于当前路径中。
Clear canvas方法：获取画布的宽度和高度，icanvas.height，Ican vas . width；然后使用clear rect()；
修改画布的宽度和高度：icanvas.width= 200；Icanvas.width=300 。
GlobalAlpha:设置透明度，只能是0到1之间的数字。如果透明度不同，请在绘制第二张图片之前将其重置。
toda taurl:ICA canvas . toda taurl(type，encoder options)，此函数返回图像的base64 URI，参数可选。Type可以设置图片类型如image/jpeg、image/webp，默认为image/png；EncoderOptions是一个从0到1的数字，用于设置Image/JPEG和Image/WebP的图像质量。此参数对于设置其他格式的类型无效。
10.剪裁
Clip():从画布上剪切任意形状和大小的画布，之后所有的绘图将被限制在剪切区域内。这种方法通常与绘制矩形、圆形和其他路径一起使用。这几个方法之后，裁剪图像，后期的绘画一定是在裁剪好的画布上。
ictx.arc(100，100，50，(数学。PI/180)*0，(数学。PI/180)*360，真)；ictx . stroke()；ictx . clip()；ictx.fillStyle= greenictx.fillRect(0，0，150，100)；
如果还想操作外部画布，在剪切前使用save()函数保存，剪切后使用restore()函数恢复到之前保存的状态，但中间做的操作不会消失。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。