canvas学习(二)----------------绘制图形和文本

VS Code编辑器在不安装相关插件的情况下，使用canvas绘制图形是没有代码提示的，这个时候可以添加一行注释来解决
/** @type {HTMLCanvasElement} */

画直线

设置绘制的起始点ctx.moveTo(x, y)
设置经过的某个位置ctx.lineTo(x, y)
2个点就是直线（可以或者多个点）
通过beginPath()和closePath()可以防止形成连笔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas1" width="600" height="600"></canvas>
</body>
</html>
<script>
    /** @type {HTMLCanvasElement} */
    //1、找到画布
    var canvas1 = document.querySelector('#canvas1')
    //2、绘制上下文
    var ctx = canvas1.getContext('2d')

    //开始路径
    ctx.beginPath()
    //3、设置绘制的起始点
    ctx.moveTo(50, 50)
    //4、 设置经过的某个位置
    ctx.lineTo(50, 300)
    ctx.lineTo(150, 50)
    //结束路径
    ctx.closePath()
    
    //5、 绘制路径
    ctx.strokeStyle = 'aqua'
    ctx.lineWidth = 20
    //设置或返回线条的结束端点样式
    ctx.lineCap = 'round'  //圆角
    //设置连接点(拐点)的样式
    // ctx.lineJoin = 'round'
    //设置或返回最大斜接长度
    // ctx.miterLimit = 2
</script>

画圆

arc(x,y,半径,起始角度,终止角度,是否逆时针)
Math.PI代表半圆 Math.PI*2代表圆
ctx.arc(300, 300, 100, 0, Math.PI * 2, false)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas1" width="600" height="600"></canvas>
</body>
</html>
<script>
    /** @type {HTMLCanvasElement}*/
    var canvas1 = document.getElementById('canvas1')
    var ctx = canvas1.getContext('2d')
    //画圆   默认为false 是顺时针 参数 x,y,半径,起始角度,终止角度 
    ctx.beginPath()
    ctx.arc(300, 300, 100, 0, Math.PI * 2, false)
    ctx.stroke()
</script>

绘制文本

font = “字体大小字体类型” 设置或返回文本内容的当前字体属性
ctx.font = “100px 宋体”
fillText(‘内容’, x, y) 在画布上绘制“被填充的”文本即输入的内容
ctx.fillText(‘helloWorld’, 100, 100)
strokeText(‘内容’, x, y) 在画布在画布上绘制文本（无填充）即输入的内容
ctx.strokeText(‘中午吃啥’, 200, 200)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas1" width="600" height="600"></canvas>
</body>
</html>
<script>
    /** @type {HTMLCanvasElement}*/
    var canvas1 = document.getElementById('canvas1')
    var ctx = canvas1.getContext('2d')

    // 设置或返回文本内容的当前字体属性
    ctx.font = "100px 宋体"
    
    //  设置阴影（可用于任何地方）
    ctx.shadowBlur = 20;				//设置或返回用于阴影的模糊级别
    ctx.shadowColor='rgba(0,0,0,1)'		//设置阴影颜色(可以用16进制)
    ctx.shadowOffsetX=10				//设置阴影x轴偏移
    ctx.shadowOffsetY=10				//设置引用y轴偏移

    //实现弹幕效果
    let x=500
   setInterval(function(){
        //清空画布
        ctx.clearRect(0,0,600,600)
        x-=10
        if(x<50){
            x=600
        }
    //在画布上绘制“被填充的”文本   即输入的内容 
    ctx.fillText('helloWorld', x, 100)
    //在画布在画布上绘制文本（无填充） 即输入的内容
    ctx.strokeText('中午吃啥', x, 200)
    },50)

</script>

设置阴影

ctx.shadowBlur = 20;						设置或返回用于阴影的模糊级别
ctx.shadowColor='rgba(0,0,0,1)'				设置阴影颜色(可以用16进制)
ctx.shadowOffsetX=10						设置阴影x轴偏移
ctx.shadowOffsetY=10						设置引用y轴偏移