var canvas = document.getElementById("demoCanvas"); 获取canvas元素
ctx = canvasDom.getContext('2d'); 获取上下文
ctx.moveTo(0,0) 设置起始点
ctx.lineTo(100,100) 设置终点
ctx.lineWidth = 8; 线宽度
ctx.strokeStyle = "red" 设置颜色
ctx.stroke() 显示
ctx.fillStyle = "pink"; 填充色
ctx.fill() 填充
ctx.closePath() 结束
ctx.beginPath(); 开启一个新状态绘图
ctx.rect(x,y,w,h) 绘制一个矩形 //前两参数起始点坐标，后两参数宽高
ctx.strokerect(x,y,w,h) 直接显示矩形，不需要ctx.stroke()
ctx.fillrect() 被填充直接显示的矩形
ctx.clearRect(x,y,w,h) 清除矩形 --重要
ctx.arc(x,y,sAngle,eAngle,count) //绘制圆形 x坐标/y坐标/半径/绘制开始角度/绘制结束角度/逆时针绘制

image.png

(R+20))
ctx.strokeText('意',400,400) 空心文字绘制 要绘制的文字/x坐标/y坐标
ctx.fillText('意',400,400) 实心文字绘制 要绘制的文字/x坐标/y坐标
ctx.font="20px'微软雅黑'" //设置字体样式
ctx.textBaseline="bottom" // 设置字体底线对齐方式

image.png

ctx.measureText('我是text') // 返回指定文本的宽度
ctx.drawImage(img,x,y,w,h) // 图片的dom对象，起始坐标,宽高
ctx.drawImage(img,x,y,w,w

面向对象基础

        function Cat(option){
            this.age = option.age;
            this.x = option.x
        }
        Cat.prototype.show = function(){
            console.log(this.age+this.x)
        }
        Cat.prototype.hidd = function(){
            console.log(this.age-this.x)
        }
        var cat = new Cat({
            age:8,
            x:2
        })
        cat.show()
        cat.hidd()

ctx.shadowColor="tael" 设置阴影的颜色
ctx.shadowBlur=10 设置阴影模糊级别
ctx.shadowOffsetX=10 设置阴影距离形状的水平距离
ctx.shadowOffsetY=10 设置阴影距离形状的垂直距离
(少用，性能比较差，尽量让UI做图片)
var grd=ctx.createLinearGradient(0,0,170,0) 创建一个线性渐变，参数，两个点坐标
grd.addColorStop(0,'pink') // 添加一个新的渐变色
grd.addColorStop(1,'pink') // 添加一个新的渐变色
ctx.fillstyle = grd 把渐变设置到填充样式
ctx.fillRect(0,0,300,300) 创建一个矩形
ctx.translate(200,200) 把当前画布移动到坐标点
ctx.rotate(30*Math.PI/180) 旋转画布，参数为度数
ctx.scale(2,2) 画布缩小或放大，参数倍数
ctx.globalAlpha=0.3 设置画布透明度
ctx.save() 把当前上下文状态保存起来
ctx.restore() 把之前保存画布的状态还原
ctx.toDataURL('img',1) 画布保存为base64编码图片
ctx.drawImage(canvas1,10,10) 把一个画布放到另一个画布上，可以让canvas优化
ctx.arcTo(240,100,240,110,40) //做圆角用 端点1坐标，端点2坐标，半径
Konva库的使用

//引入 konva 库
 <script src="https://unpkg.com/konva@8/konva.min.js"></script>
//存放canvas画布的容器
    <div id="cont">
    </div>
 // 创建舞台
        var stage =new Konva.Stage({
            container:'cont', //设置当前舞台的容器
            width:window.innerWidth,  // 设置舞台的宽高全屏
            height:window.innerHeight
        })
        //创建一个层，一个舞台可以投多个层
        var layer = new Konva.Layer();
        //把层添加到舞台上
        可以添加多层，背景层，动画层，光罩层//
        stage.add(layer)
        // konva的动画系统
        innerRect.to({
            width:maxWidth,  
            duration:1.4,
            opactity:0.3 
        })
//获取舞台中心点坐标
//stage.width()是舞台的总宽度
//stage.height()是舞台的总高度
var cenX = stage.width()/2
var cenY = stage.height()/2
// 创建矩形，创建形状对象，然后把形状放到层上去
        var rect = new Konva.Rect({
            x:500,  //设置当前矩形的X坐标
            y:100, //设置当前矩形的Y坐标
            opactity:.4,  //设置当前矩形的透明度
            rotation:40,
            width:100,  //设置宽度
            height:100,  //设置高度
            scaleX:1.2,
            scaleY:1.2,
            draggable:true,
            fill:'pink',  //设置颜色
            cornerRadius:1/2  //设置圆角
        })
  stroke:'#ccc'  // 对形状进行描边 
strokeWidth:4  // 设置边的宽度
        //把矩形添加到层上
        layer.add(rect)
        //把层渲染到舞台上
        layer.draw()
//设置虚线
        dash:[10,4]  
//点击舞台任何区域触发事件
stage.on('contentClick',function(){
  console.log('sss')
});