html5的canvas方式应用指南

日期:2021-01-20 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

canvas的方式

     save()储存当今自然环境的情况

     restore() 回到以前储存过的相对路径情况和特性

     createEvent()

     getContext()回到1个目标,指出浏览制图作用必要的API

     toDataUPL() 回到canvas图象的URL

线条款式的特性和方式

     特性:

     lineCap设定或回到线条的完毕节点款式

     lineJoin设定或回到两条线交叉时,所建立的拐角种类

     lineWidth设定或回到当今线条的宽度.

     miterLimit设定或回到最大斜接长度

色调,款式和黑影特性和方式

     特性

     fillStyle设定或回到用于填充美术绘画的色调,渐变色或方式

     strokeStyle设定或回到用于笔触的色调,渐变色或方式

     shadowColor设定或回到用于黑影的色调

     shadowBlur设定或回到用于黑影的模糊不清级別

     shadowOffsetX设定或回到黑影距样子的水平间距

     shadowOffsetY设定或回到黑影距样子的竖直间距

方式

     createLinearGradient()建立线形渐变色(用在画布內容上)

     createPattern()在特定的方位上反复特定的元素

     createRadialGradient()建立放射性状/环状的渐变色(用在画布內容上)

     addColorStop()要求渐变色目标中的色调或终止部位

相对路径方式

         fill()填当做前制图(相对路径)

         stroke()绘图已界定的相对路径

beginPath()起止1条相对路径,或重设当今相对路径

moveTo()把相对路径挪动到画布中的特定点,不建立线条

closePath()建立从当今点返回起止点的相对路径

lineTo()加上1个新点,建立从该点到最终特定点的线条

clip()从初始画布裁切随意样子和规格的地区

quadraticCurveTo()建立第2次贝塞尔曲线图

bezierCureTo()建立之前方贝塞尔曲线图

arc()建立弧/曲线图(用于建立圆形或一部分圆)

arcTo()建立两切线之间的弧/曲线图

isPointInPath()假如特定的点坐落于当今相对路径中,回到布尔运算值

矩形框

         Rect()建立矩形框

         fillRect()绘图”被填充”的矩形框

strokeRect()绘图矩形框(无填充)

clearRect()在给定的矩形框内消除特定的像素

设定文字特性和方式

         特性:

         font 设定或回到文字內容确当前字体样式特性

         textAlign设定或回到文字內容确当前对齐方法

textBaseline 设定会回到在绘图文字时应用确当前文字基准线.

         方式:

fillText()在画布上绘图”被填充的”文字

strokeText()在画布上绘图文字(无填充)

measureText()回到包括特定文字宽度的目标

变换方式

         scale() 放缩当今制图至更大或更小

         rotate() 转动当今制图

         translate()再次投射花布衫的(0,0)部位

         transform()更换制图确当前变换引流矩阵

setTransform()将当今变换重设为企业引流矩阵.随后运作transform()