html5 canvas word,HTML5 Canvas_js

canvas_js,html5画布~

Html5--Canvas:Html5绘图画布(中文:https://http://www.wendangwang.com/cn/Canvas_tutorial)--(日文:http://www.html5.jp)--(日文:http://www.html5.jp/canvas/index.html)

函数

定义全局

说明

输出图像到一个可以与Html交互的URL

获得绘图上下文(目前contextId只可以为"2d",::Html5-canvas标签还不支持"3d"绘图)开始记录绘制路径

将绘制焦点移动到(objectx,objecty)指定的坐标处,并开始一条新的子路径

url=canvas.toDataURL([type,...])context=canvas.getContext(contextId)

context.beginPath()context.moveTo(x,y)context.closePath()context.lineTo(x,y)

context.quadraticCurveTo(cpx,cpy,x,y)

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)context.arcTo(x1,y1,x2,y2,radius)

context.arc(x,y,radius,startAngle,endAngle,anticlockwise)context.rect(x,y,w,h)context.fill()context.stroke()context.clip()

context.isPointInPath(x,y)context.clearRect(x,y,w,h)context.fillRect(x,y,w,h)context.strokeRect(x,y,w,h)gradient.addColorStop(offset,color)

gradient=context.createLinearGradient(x0,y0,x1,y1)gradient=context.createRadialGradient(x0,y0,r0,x1,y1,r1)pattern=context.createPattern(image,repetition)context.save()context.restore()context.scale(x,y)context.rotate(angle)context.translate(x,y)

context.transform(m11,m12,m21,m22,dx,dy)context.setTransform(m11,m12,m21,m22,dx,dy)imagedata=context.createImageData(sw,sh)imagedata=context.createImageData(imagedata)imagedata=context.getImageData(sx,sy,sw,sh)

/context.clip()等操作来实现具体的路径绘制)结束一个子路径(此时可以选择context.fill()/context.stroke()()/

向当前路径增加一条由当前绘制焦点到(objectx,objecty)指定坐标处的线段

向当前路径增加一条以当前绘制点为起点,(objectx,objecty)为终点,(cpx,cpy)为控制点的二次贝赛尔曲线向当前路径增加一条以当前绘制点为起点,(x,y)为终点,(cpx1,cpy1)-(cpx2,cpy2),为控制点的三次贝赛尔曲线先向当前路径增加一条由当前绘制焦点到(x1,y1)的线段,再以radius为半径绘制一条由(x1,y1)到(x2,y2)弧绘制一条弧线;(x,y)圆心,radius半径startAngle起始弧度,endAngle终止弧度,anticlockwise:(bool)旋转方向通过指定起点(x,y)和宽度,高度的一绘向量(w,h)绘制一个矩形

使用全局填充样式context.fillStyle及其它全局样式,如:globalAlpha等填充当前路径(自动封闭未封闭路径)使用全局勾画样式context.strokeStyle及其它全局样式,如:globalAlpha等勾画当前路径(可理解为绘制边框)对当前路径内侧区域进行剪辑测试(x,y)指定的点是否在当前路径内

清除当前绘图上下文中指定的矩形区域的内容,参数说明请参考context.rect(x,y,w,h)填充一个矩形区域,参数说明请参考context.rect(x,y,w,h)勾画一个矩形,参数说明请参考context.rect(x,y,w,h)向一个渐变结构中添加参考点创建一个线性渐变结构

创建一个具有光感效果的球面渐变结构,高光照面:(x0,y0,r0),渐变基面:(x1,y1,r1)

创建一个图案:image为Img类型元素,repetition为铺放样式;pattern可以应用于fillStyle及其它样式保存当前绘图上下文的内容到Context图形栈将Context的栈顶图形还原至当前绘图上下文以(x,y)指定的比例缩放当前绘图上下文的坐标系

以当前绘图上下文坐标系元点为圆心将画布旋转(angle)指定的弧度以向量(x,y)进行平移变换

将当前的变形矩阵乘上矩阵:{(m11,m21,dx),(m12,m22,dy),(0,0,1)}设置当前变换矩阵为指定矩阵:{(m11,m21,dx),(m12,m22,dy),(0,0,1)}通过指定的尺寸创建一个图像复制一个图像

将当前绘图上下文的图形中以(sx,sy,sw,sh)限定的范围中的图形取出并生成图像

路径

区域渐变效果状态

变形

像素操