canvas基础

2,000 阅读2分钟

canvas

1.定义(需要点高中知识)

其实可以认为是一张画布,相比较flash能与js进行交互,自我实现想要的炫酷效果,并且放大不会像图片像素点一样失帧。

基础属性(方便查阅)

基础api(方便查阅)

2.绘制

认知:

1.触笔这里指的边框,边框实际的绘制是由线条向外和和向内的线宽各占一半(举个栗子 lineWidth = 15,实际上边框只有7.5,类似于margin7.5,padding7.5),所以在canvas中无论是w=100,还是h=100,指的都是从起点到边框线的中间,即类似于margin和padding的中间)理解比较拗口,可以用pxcook实际测量下。

2.stroke绘制线条和fill填充区域的api书写顺序不同则会出现覆盖,后面的覆盖前面。

3.除了 ctx.fiilRect(x,y,w,h) ,其他跟绘制线条有关的都需要加上ctx.stroke()

步骤:

1.添加canvas标签,自定义宽高属性

2.获取到canvas元素,再获取到画板

3.绘制线条绘制图形,线条,等等(注意:带有canvas宽高时候大小,画布内容根据canvas宽高等比例缩放)

3.api

绘制区域

ctx.fiilRect(x,y,w,h)      //绘制黑色填充区域

ctx.react(x,y,w,h)    ctx.stroke()   //绘制空心矩形

ctx.clearRect(x,y,w,h)   //清除填充区域

ctx.fillStyle = "颜色"   //填充颜色

ctx.lineWidth = 数字   //触笔的跨宽度,配合react,stroke使用

ctx.strokeStyle = "颜色"  //触笔的颜色

绘制线条

ctx.moveTo(x1,y1) //从某处开始(初始使用moveTo)  
ctx.lineTo(x2,y2) //连接线条到下一处(可以多次使用,用于连接线条)

//绘制一个五角星

ctx.moveTo(100,200)
ctx.lineTo(200,0)
ctx.lineTo(300,200)
ctx.lineTo(100,80)
ctx.lineTo(300,80)
ctx.lineTo(100,200)
ctx.stroke()

//bug:绘制五角星加上 ctx.lineWidth = 10起始点和终点不会闭合
//解决:添加beginPath()和ctx.closePath()去包裹路径
ctx.lineWidth = 10
ctx.beginPath()
ctx.moveTo(100,200)
ctx.lineTo(200,0)
ctx.lineTo(300,200)
ctx.lineTo(100,80)
ctx.lineTo(300,80)
ctx.lineTo(100,200)
ctx.closePath()
ctx.stroke()

绘制端点

ctx.lineCap = "miter"  //默认 miter
ctx.lineCap = "round" //圆角
ctx.lineCap = "bevel" //斜角
ctx.lineWidth = "10" //设置后实际的边框能看见的只有一半,圆角也是


绘制圆,旋转,位移,缩放

认知:旋转的起点是x轴的正方向,而不是y轴的正方向

公式:1弧度 = 1*(Math.PI/180)

配合:scale要在独立路径里面使用(相当于局部作用域)

ctx.translate(x,y) //作为所有绘制的初始点,当不想0,0作为所有绘制初始点时候
//绘制圆
ctx.arc(x,y,r,起始弧度,终点弧度,是否逆时针) 
ctx.stroke()

ctx.rotate(弧度)//旋转某个弧度,以左上角(0,0)作为基点,而不是以当前图形作为基点
ctx.scale(宽度缩放倍数,高度缩放倍数) //缩放 配合ctx.save() ctx.restore(),以免造成全局缩放