0
点赞
收藏
分享

微信扫一扫

canvas基本用法

蓝哆啦呀 2021-09-24 阅读 66
canvas前端

一、创建canvas


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" style="box-shadow:2px 5px 5px rgba(0,0,0,0.4)">
        我们在设置 canvas 之前需要首先监测用户电脑是否支持 canvas
    </canvas>
    <!-- 需要注意,canvas 默认样式的宽度和高度 是 300px * 150px. -->

</body>
</html>

如图


二、修改 Canvas 的画布

<script type="text/javascript">
 var canvas_1 = document.getElementById("canvas");
 canvas_1.width = "500"; //注意,不要加 px
 canvas_1.height = "500";
 
</script>

三、获取绘制环境

我们可以通过 var ctx = canvas_1.getContext("2d"); 来去获取到我们的绘制环境。

<script type="text/javascript">
 
    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas");
 
    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");
 
    // 打印一下,查看是否能够显示具体环境
    console.log(ctx);
 
</script>

四、绘制的坐标轴

横轴向右是正,纵轴向下是正。


五 、绘制直线

绘制直线满足的条件
线的起点
线的终点
线的颜色
线的宽度


<script type="text/javascript">
    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas");
 
    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");
 
    // 打印一下,查看是否能够显示具体环境
    console.log(ctx);
 
    // 开始绘制
    ctx.beginPath();
 
    //设置绘制起点
    ctx.moveTo(0,0);
 
    //设置绘制下一个点
    ctx.lineTo(700,400);
 
    //结束绘制
    ctx.closePath();

    //填充 canvas 当前路径绘制边框
    ctx.stroke()
</script>

直线样式

  // 直线填充
  // 开始绘制
        ctx.beginPath();
        //设置绘制起点
        ctx.moveTo(0, 0);
        //设置绘制下一个点
        ctx.lineTo(300, 400);
        // //设置绘制下一个点
        ctx.lineTo(400, 100);
        // //设置线的宽度
        ctx.lineWidth = 10;
        // //结束绘制
        ctx.closePath();
        // // 设置填充样式
        ctx.fillStyle = "green";
        // //设置绘制的样式
        ctx.strokeStyle = "red";
        ctx.fill()
        ctx.stroke()


设置边角的样式及绘制矩形

<script>
        // 获取元素
        var canvas_1 = document.getElementById("canvas")
        console.log(canvas_1);
        // 设置宽高
        canvas_1.width = "500"; //注意,不要加 px
        canvas_1.height = "500";

        // // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
        var ctx = canvas_1.getContext("2d");
        console.log(ctx);


        // 设置线条宽度
        ctx.lineJoin = "miter"; // bevel斜角  miter尖角  round 圆角
        ctx.fillStyle = "pink"
            // 填充一个矩形 实心
        ctx.fillRect(30, 20, 120, 60);
        // / 设置线条宽度
        ctx.lineWidth = 20;

        // 设置填充颜色
        ctx.strokeStyle = 'pink';
        // 填充一个矩形 空心
        ctx.strokeRect(80, 160, 120, 60);

        // 设置线条宽度
        ctx.lineJoin = "bevel";
        // 设置填充颜色
        ctx.strokeStyle = '#f0f';
        // 填充一个矩形
        ctx.strokeRect(130, 190, 120, 60);

        ctx.storke(); //填充 canvas 当前路径绘制边框
    </script>


绘制字符串

   <script>
        // 获取 canvas 元素对应的 DOM 对象
        var canvas_1 = document.getElementById("canvas");
        canvas_1.width = "500"; //注意,不要加 px
        canvas_1.height = "500";

        // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
        var ctx = canvas_1.getContext("2d");

        ctx.fillStyle = '#00f';
        ctx.font = 'italic 50px 隶书';
        ctx.textBaseline = 'top'; // 设置绘制字符串的垂直对齐方式(top、hanging、middle、alphabetic、idecgraphic、bottom 等)
        // textAlign    设置绘制字符串的水平对齐方式(start、end、left、right、center等)

        //填充字符串
        ctx.fillText('人生得意须尽欢', 0, 0);
        ctx.strokeStyle = 'f0f';
        ctx.font = 'bold 45px 宋体';

        // 绘制字符串的边框
        ctx.strokeText('莫使金樽空对月', 0, 50, 200);
    </script>


设置阴影

 <script>
        // 获取 canvas 元素对应的 DOM 对象
        var canvas_1 = document.getElementById("canvas");
        canvas_1.width = "500"; //注意,不要加 px
        canvas_1.height = "500";

        // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
        var ctx = canvas_1.getContext("2d");
        // 设置阴影的模糊程度
        ctx.shadowBlur = 5.6;

        // 设置阴影的颜色
        ctx.shadowColor = '#222';

        // 设置阴影在 X,Y 方向的偏移
        ctx.shadowOffsetX = 10;
        ctx.shadowOffsetY = -6;


        ctx.fillStyle = '#00f';
        ctx.font = 'italic 50px 隶书';
        ctx.textBaseline = 'top'; // 设置绘制字符串的垂直对齐方式(top、hanging、middle、alphabetic、idecgraphic、bottom 等)
        // textAlign    设置绘制字符串的水平对齐方式(start、end、left、right、center等)

        //填充字符串
        ctx.fillText('人生得意须尽欢', 0, 0);
        ctx.strokeStyle = 'f0f';
        ctx.font = 'bold 45px 宋体';

        // 绘制字符串的边框
        ctx.strokeText('莫使金樽空对月', 0, 50, 200);
    </script>

举报

相关推荐

canvas基本操作

Git基本用法

Axios基本用法

Vue基本用法

Leaflet基本用法

0 条评论