CanvasJS常见API

//获取canvas元素
let canvas = document.getElementById("canvas")
//渲染背景上下文
let ctx = canvas.getContext("2d") 
//绘制空心的矩形 x,y,w,h
ctx.rect(100,100,200,100)
//开始描边
ctx.stroke()
//立即描边矩形
ctz.strokeRect()
//设置绘制颜色
ctx.fillStyle = "orange"
//设置绘制颜色
ctx.fillStyle = "rgb(255,165,0)"
//绘制实心矩形
ctx.fillRect(300,100,200,100)
//擦除已经绘制的矩形
ctx.clearRect(100,100,200,100)
//开启路径绘制
ctx.beginPath()
//绘制三角形的左顶点
ctx.moveTo(100,100)
//绘制三角形的右顶点
ctx.lineTo(300,100)
//绘制三角形的底部线条
ctx.lineTo(300,300)
//关闭路径绘制
ctx.closePath()

//绘制图片 按照图片宽高绘制
ctx.drawImage(img,x,y)
//绘制图片 拉伸宽高
ctx.drawImage(img,x,y,width,height)

//绘制圆形 x,y-圆心坐标 radius-半径 startAngle,endAngle-绘制的弧度 anticlockwise-顺时针还是逆时针绘制
ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise)

//绘制12个圆
for(let i =0;i<12;i++){
    ctx.beginPath()
    let x = 25+i*50
    let y = 25
    let radius = 20
    let startAngle = 0;
    let endAngel = Math.PI+(Math.pi*i)/12 //Math.PI是半圆
    
    ctx.arc(x,y,radius,startAngle,endAngle)
    ctx.fill()
    ctx.closePath()
}

//绘制贝塞尔曲线-复杂弧度的线条 从当前点开始 cp1x,cp1y-调试红点 x,y结束点
ctx.quadraticCurveTo(cp1x,cp1y,x,y)

//绘制对话气泡
ctx.beginPath()
//设置贝塞尔曲线的起点
ctx.moveTo(75,25)
ctx.quadraticCurveTo(25,25,25,62.5)
ctx.quadraticCurveTo(25, 100, 50, 100)
ctx.quadraticCurveTo(50, 120, 30, 125)
ctx.quadraticCurveTo(60, 120, 65, 100)
ctx.quadraticCurveTo(125, 100, 125, 62.5)
ctx.quadraticCurveTo(125, 25, 75, 25)
ctx.stroke()

//绘制不同宽度的线条
for(let i = 0;i<10;i++){
    ctx.beginPath()
    
    ctx.lineWidth = i+1
    ctx.moveTo(5+i*14,5)
    ctx.lineTo(5+i*14,140)
    ctx.stroke()
    
    ctx.closePath()
}

//绘制不停动的蚂蚁线虚线
let offset = 0
function draw(){
    //每次清除再重绘
    ctx.clearRect(0,0,canvas.width,canvas.height)
    //绘制虚线
    ctx.setLineDash([4,4,12,4])
    ctx.lineDashOffset = offset
    ctx.strokeRect(20,20,150,150)
}
function march(){
    offset++
    if(offset>24){
        offset = 0;
    }
    draw()
    setTimeout(march,20)
}
march()

//设置阴影
//阴影在XY轴的延申距离
ctx.shadowOffsetX = 10
ctx.shadowOffsetY = 10
//阴影的模糊程度
ctx.shadowBlur = 10
//阴影颜色效果，默认是全透明的黑色
ctx.shadowColor = "rgba(23,23,23,0.5)"
ctx.fillRect(20,20,150,150)

//绘制文本
ctx.fillText(text,x,y,[,maxWidth]) //在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的
ctx.strokeText(text,x,y,[,maxWidth]) //在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的

//当前字体的样式
ctx.font = "bold 48px serif"
//文本对齐方式 也就是 x,y-对于文本的相对位置
ctx.textAlign = "left"||"right"||"center"||"start"||"end"

//获取canvas资源
let img = new Image()
img.onload = function(){}
img.src = "XXX.png"