canvas画布

H5学习推荐网站：https://www.runoob.com/html/html5-websocket.html

一、Canvas介绍

1. canvas为H5新增元素，其本身为一个画布，但是用js当做画笔动态渲染，画笔工具为getContext(‘2d’)
2. 标签,默认用行内样式设置样式，若用style进行设置，会发生变形。其本身默认宽高为300*150

    <canvas id="mycanvas" width="500" height="500" style="border: 1px solid #000;"></canvas>
<!--此处将宽高写在行内，可以保证后面的操作在点位置的确定时，无偏差，写在样式中，会有偏差-->

        let canvas = document.getElementById('mycanvas')
        // getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
        let c = canvas.getContext('2d')
        // 实心，填充颜色为红色，c.fillRect(x,y,width,height)
        c.fillStyle = 'red'
        c.fillRect(50,50,400,400)

        // 空心，边框颜色、位置设置
        c.strokeStyle = 'blue'
        c.strokeRect(30,30,400,200)

二、矩形绘制

1、实心矩形

        c.fillStyle = 'red'
        c.fillRect(50,50,400,400)

2、空心矩形

        c.strokeStyle = 'blue'
        c.strokeRect(30,30,400,200)

3、路径绘制

        c.beginPath()
        c.rect(100,100,200,200)
        c.lineWidth = 5     //边框宽度
        c.closePath()
        c.strokeStyle = 'red'   // 也可用实心方法
        c.stroke()

4、moveTo与lineTo的区别

        // 简单解释就是，moveTo只是移动画笔位置,lineTo是划线
        c.beginPath()
        // 将js画笔移动到(250,200)位置，划线到(200,100)
        c.moveTo(250,200)
        c.lineTo(200,100)
        // 将js画笔移动到(0,0)位置，划线到(20,200)
        c.moveTo(0,0)
        c.lineTo(20,200)
        c.lineWidth = 10
        c.stroke()

三、三角形绘制

        c.beginPath()
        c.moveTo(50,50)     // 定义起始点
        c.lineTo(50,200)    //定义连接点
        c.lineTo(200,50)    // 定义连接点
        c.closePath()
        c.strokeStyle = 'red'
        c.stroke()

四、圆形绘制

        // arc(x,y,r,startAngle,endAngle,false)
        // 圆心(x,y)坐标，半径，初始角度，终止角度，是否逆时针，默认为false
        c.beginPath()
        c.arc(250,250,100,0,Math.PI*2,false)
        c.closePath()
        c.strokeStyle = 'blue'
        c.stroke()

五、端点绘制线条与线条连接

1、端点绘制线条

        c.lineWidth = 20
        c.beginPath()
        c.moveTo(50,50)
        c.lineTo(250,200)
        // lineCap控制线条端点类型，其值有round(圆头),butt(平头，默认)，square(方头),平头即什么都不加，顶端平的；方头即在顶端加一个正方块。
        c.lineCap = 'square'
        c.stroke()

2、线条连接

        c.beginPath()
        c.moveTo(50,50)
        c.lineTo(250,200)
        c.lineTo(200,100)
        c.lineWidth = 10
        // lineJoin设置两线条相交处的状态，其值有round(圆交)，bevel(斜交)，miter(斜接，默认)
        c.lineJoin = 'round'
        c.lineCap = 'round'
        c.stroke()

六、弧线的绘制

        c.beginPath()
        // arcTo(x1,y1,x2,y2,radius) 画笔从(100,20)开始以半径50，经过(150,40)，到(150,70)为止
        c.moveTo(100,20)
        c.arcTo(150,40,150,70,50)
        c.strokeStyle = 'red'
        c.stroke()

七、二次贝塞尔曲线

        // 贝塞尔曲线网站：https://cubic-bezier.com
        c.beginPath()
        // quadraticCurveTo(cx,cy,x,y)从上一点开始，以(cx,cy)作为控制点，到(x,y)为止画一条二次曲线
        c.moveTo(100,20)
        c.quadraticCurveTo(200,50,200,200)
        c.lineWidth = 3
        c.strokeStyle = 'red'
        c.stroke()

八、三次贝塞尔曲线

        // 贝塞尔曲线网站：https://cubic-bezier.com
        c.beginPath()
        // bezierCurveTo(cx1,cy1,cx2,cy2,x,y)两个控制点坐标，一个终止位置坐标
        c.moveTo(75,40)
        c.bezierCurveTo(75,37,70,25,50,25)
        c.bezierCurveTo(20,25,20,62.5,20,62.5)
        c.bezierCurveTo(20,80,40,102,75,120)
        c.bezierCurveTo(110,102,130,80,130,62.5)
        c.bezierCurveTo(130,62.5,130,25,100,25)
        c.bezierCurveTo(80,25,75,37,75,40)
        c.lineWidth = 3
        c.strokeStyle = 'red'
        c.stroke()

九、渐变

1、线性渐变

       	 // createLinearGradient(startX,startY,x,y) 起点终点坐标
        // addColorStop(百分点，颜色)
		let canvas = document.getElementById('mycanvas')
        let c = canvas.getContext('2d')
        let gradient = c.createLinearGradient(0,0,500,500)
        gradient.addColorStop(0,'red')
        gradient.addColorStop(.2,'orange')
        gradient.addColorStop(.4,'green')
        gradient.addColorStop(.6,'blue')
        gradient.addColorStop(.8,'purple')
        gradient.addColorStop(1,'gray')
        c.beginPath()
        c.arc(250,250,250,0,Math.PI*2)
        c.closePath()
        c.fillStyle = gradient
        c.fillRect(0,0,500,500)

2、径向渐变

        // createRadialGradient(startX,startY,startR,endX,endY,endR) 起点坐标,起始半径；终点坐标，终点半径
        // addColorStop(百分点，颜色)
        let canvas = document.getElementById('mycanvas')
        let c = canvas.getContext('2d')
        let gradient = c.createRadialGradient(250,250,100,250,250,250)
        gradient.addColorStop(0,'red')
        gradient.addColorStop(.2,'orange')
        gradient.addColorStop(.4,'green')
        gradient.addColorStop(.6,'blue')
        gradient.addColorStop(.8,'purple')
        gradient.addColorStop(1,'gray')
        c.beginPath()
        c.fillStyle = gradient
        c.fillRect(0,0,500,500)

十、文本

        c.font = 'normal 50px Yahei'
        c.textAlign = 'start'   // 属性值可为left/right/center/start/end
        // c.textBaseline = 'bottom' // 属性值可为alphabetic(default)/hanging/ideographic/top/middle/bottom
        c.strokeStyle = 'blue'
        // strokeStyle('text',startX,startY,最大像素宽度)同fillText
        c.strokeText('王一博', 50, 50, 100)
        c.fillStyle = "green"
        c.fillText('肖战',50, 100, 100)

十一、阴影

        c.shadowColor = 'black'     // 阴影颜色
        c.shadowOffsetX = 15         // x轴偏移量
        c.shadowOffsetY = 5          // y轴偏移量
        c.shadowBlur = 5             // 模糊度
        c.fillStyle = 'blue'
        c.fillRect(20,20,100,100)

十二、图像

        let img = new Image()
        img.src = './11.jpg'
        img.onload = function(){
            c.drawImage(img,20,20,500,333,10,10,400,300)
            // drawImage(img,x1,y1,w1,h1,x,y,w,h)或
            // drawImage(img, x,y)或drawImage(img,x,y,w,h)原图像横纵坐标及宽高，目标图像横纵坐标及宽高
        }