美文网首页
canvas绘制基础

canvas绘制基础

作者: infi_ | 来源:发表于2017-12-28 10:09 被阅读0次

在canvas出现之前,web上会动的图片只有gif,不过随着canvas的出现一切都已经改变
canvas的绘图步骤很像ps,有路径,有填充
现阶段支持的浏览器 IE支持到9 9以下均不支持

getContext 获取canvas绘图的上下文环境
之后在绘图环境上有以下API
lineJoin 线头线尾的形状 round为圆角
lineWidth 线的宽度
font 设置字体
fillText 填充文字 第一个参数是文本 第二个参数是X坐标,第三个参数是Y坐标
strokeRect 空心矩形,接收四个参数
fillStyle 填充样式 可以接受rgba或渐变
创建渐变的例子

var gradient=can2_context.createLinearGradient(0,500,0,700);
gradient.addColorStop(0,'blue')
gradient.addColorStop(0.25,'white')
gradient.addColorStop(1,'blue')
can2_context.fillStyle=gradient;
can2_context.fillRect(0,500,canvas_2.width,700)

createLinearGradient的四个参数表示渐变的方向 0,500,0,700表示的是垂直方向渐变
addColorStop 第一个参数填0~1之间的数 第二个参数添颜色
fillRect 实心矩形

相关文章

网友评论

      本文标题:canvas绘制基础

      本文链接:https://www.haomeiwen.com/subject/ffsmgxtx.html