canvas 初识,canvas基本语法练习 -01

canvas

canvas 是什么?

• 广义来讲: canvas 是 h5 新增的 canvas 2d 绘图功能
• 在html 中:
  • canvas 是 HTML标签
  • 我们需要用 js 在 canvas 里绘制图形
  • canvas 可以理解为一张画布.

如何设置 canvas 的宽高

canvas 的宽高是通过 canvas 的 dom属性来设置的,而不是 通过 css 来设置的. canvas 如果不设置宽高的话, 那么它有一个默认的宽高 300 150

 <style>
        #canvas {
    
            background-color: lightblue;
        }
</style>

<canvas id="canvas" width="600" height="700">
</canvas>

如何获取 canvas 的上下文对象

二维的上下文对象

// const ctx = canvas.getContext('webgl') // 三维的上下文对象我们暂不研究

const ctx = canvas.getContext('2d')
ctx.fillRect(50,50,400,200)

如何用 canvas 画画

绘制矩形的方法

填充矩形方法

fillRect(x,y,w,h)

// 绘制填充矩形 参数 x,y 表示矩形 左上角的坐标位置
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.fillStyle = 'green'
ctx.fillRect(120, 50, 200, 300)

描边矩形

strokeRect(x,y,w,h)

// 绘制描边矩形
    ctx.strokeStyle = 'cyan'
    ctx.lineWidth = 30
    ctx.strokeRect(120, 50, 200, 300)

清理矩形方法

clearRect(x,y,w,h)

// 清除绘制矩形的区域
ctx.clearRect(120, 50, 200, 300)

绘制路径的步骤

1. 开始建立路径: beginPath()

2. 向路径集合添加子路径

   moveTo(x,y);  形状;  closePath() // 可选
   moveTo(x,y);  形状;  closePath() // 可选
   moveTo(x,y);  形状;  closePath() // 可选
   

   🚩 canvas 中 有哪些子路径的形状?

   1. 直线: lineTo(x,y);  lineTo(x,y);  lineTo(x,y);
   2. 圆弧: arc(x,y, 半径,开始弧度,结束弧度,方向)
   3. 切线圆弧: arcTo(x1,y1,x2,y2,半径)
   4. 二次贝塞尔曲线: quadraticCurverTo(cpx1,cpy1,x,y)
   5. 三次贝塞尔曲线: bezierCurverTO(cpx1,cpy1,cpx2,cpy2,x,y)
   6. 矩形:  rect(x,y,w,h)
   

3. 显示路径: 填充 fill(), 描边 stroke()

绘制直线路径

绘制直线路径

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d')
ctx.lineWidth=10
ctx.beginPath()