canvas基础及太极图案例

Canvas是html5新增的一个标签，后续所有的操作都使用js脚本。

1. 首先需要canvas这个标签,在js中获取这个canvas,这是一个简单的’画布’,我们需要一个’画笔’
2. 使用canvas这个dom元素的getContext(‘2d’)这个方法,生成一个’画笔’
3. 默认生成的canvas是一个透明的 300 * 150 的图片格式
4. 设置canvas的宽和高不能在css中设置
5. 默认颜色都是黑色的
6. 默认坐标右和下为坐标系的正方向

绘制图形步骤

1. 创建canvas标签
2. 获取canvas对象
3. 获取ctx画笔对象
4. 使用画笔中的各种方法和路径绘制各种各样的图形。

let canvas = document.getElementById('canvas')
            let ctx = canvas.getContext('2d')

简单用法

1. ctx.fill() 填充
2. ctx.stroke() 描边
3. ctx.fillRect(x,y,w,h) 填充一个矩形
4. ctx.strokeRect(x,y,w,h) 描边一个矩形
5. ctx.fillStyle=“red” 背景颜色为红色
6. ctx.strokeStyle="#f00" 描边颜色为红色
7. ctx.arc(x,y,r,0,2*Math.PI,true逆时针/false顺时针) 画一个圆
8. ctx.beginPath() 开启一个新的路径
9. ctx.closePath() 闭合路径
10. ctx.shadowOffsetX=10 阴影X偏移量
11. ctx.shadowOffsetY=10 阴影Y偏移量
12. ctx.shadowBlur=10 阴影羽化值
13. ctx.shadowColor=“red” 阴影颜色
14. ctx.font=“30px 楷体” 字号字体
15. ctx.textBaseline=“top” 基线
16. ctx.fillText(“六卿”,0,0) 文字和位置
17. ctx.strokeText(“六卿”,0,0) 文字和位置

线条的使用

1. ctx.moveTo(10,10) // 设置画笔的起点位置
2. ctx.lineTo(100,100) //画笔到那个坐标停止
3. ctx.stroke() //调用描边的方法
4. 这个画出是一条垂直的直线条

线性渐变

1. createLinearGradient( x0,y0,x1,y1 )返回一个对象
2. addColorStop( 小数,颜色 )

    //let linearGradient = ctx.createLinearGradient( 0,0,300,300 ) //线性渐变的起点坐标和中间坐标
            let linearGradient = ctx.createLinearGradient( 0,0,300,0 )
              linearGradient.addColorStop( 0.3,'red' ) //0-0.3 的颜色
              linearGradient.addColorStop( 0.6,'green' )
              linearGradient.addColorStop( 1,'blue' )
              //为我们fillStyle设置为渐变色
              ctx.fillStyle = linearGradient //颜色对象赋值给当前轨迹的fillStyle
              ctx.rect( 0,0,300,300 )
              ctx.fill()

径向渐变

1. createRadialGradient(x0,y0,r0,x1,y1,r1)
2. addColorStop( 小数,颜色 )

let radialGradient = ctx.createRadialGradient( 100,100,10,100,100,150 ) 
            //渐变的开始圆的坐标和半径   vs  渐变的结束圆的坐标和半径
            radialGradient.addColorStop( 0.3,'red' )
            radialGradient.addColorStop( 0.6,'green' )
            radialGradient.addColorStop( 1,'blue' )
            ctx.rect( 0,0,200,200 )
            ctx.fillStyle = radialGradient
            ctx.fill()

太极图案例

<canvas id="canvas" width="500" height="500"></canvas>
 <style>
            #canvas {
                border: 2px solid black
            }
        </style>
        <canvas id="canvas" width="500" height="500"></canvas>
        <script>
            let canvas = document.getElementById('canvas')
            let ctx = canvas.getContext('2d');
            //画出一个大圆圈
            ctx.beginPath()
            ctx.arc(240, 240, 200, 0, 2 * Math.PI)
            ctx.stroke()
            //画出上半部分黑色
            ctx.beginPath()
            ctx.arc(240, 240, 200, 1.5 * Math.PI, 0.5 * Math.PI)
            ctx.fill()
            // 上面的黑色半圆
            ctx.beginPath()
            ctx.arc(240, 140, 100, 0.5 * Math.PI, 1.5 * Math.PI)
            ctx.fill()
            //上面的白色圆
            ctx.beginPath()
            ctx.arc(240, 140, 30, 0, 2 * Math.PI)
            ctx.fillStyle = "#fff"
            ctx.fill()
            //xia 半个白色圆
            ctx.beginPath()
            ctx.arc(240, 340, 100, 1.5 * Math.PI, 0.5 * Math.PI)
            ctx.fillStyle = "#fff"
            ctx.fill()
            // 下面的小黑圆
            ctx.beginPath()
            ctx.arc(240, 340, 30, 0, 2 * Math.PI)
            ctx.fillStyle = "#000"
            ctx.fill()
        </script>