canvas绘制基础

canvas绘制基础_第1张图片

在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绘制基础)