canvas(一)

canvas绘制图形

html

<canvas id="myCanvas"></canvas>

css(设置宽高)

#myCanvas{
  width:200px;
  height:200px;   
}

JavaScript

let c = document.getElementById("myCanvas")
let ctx = c.getContext("2d")
ctx.fillStyle = "#FF0000"
ctx.fillRect(0,0,150,75)

常用api

canvas绘制图像的两种方法

ctx.fill        //填充
ctx.stroke  //绘制边框

style:在图形绘制前，要设置好绘图的样式

ctx.fillStyle    //填充的样式
ctx.strokeStyle // 边框的样式

颜色的表示方式：

直接用颜色名称:"red" "green" "blue"

十六进制颜色值: "#EEEEFF"

rgb(1-255,1-255,1-255)

rgba(1-255,1-255,1-255,透明度)

绘制矩形

ctx.fillRect(x,y,width,height)
ctx.stokeRect(x,y,width,height)

清除矩形区域

ctx.clearRect(x,y,width,height)

圆弧

ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

路径