H5C3-画布

最新推荐文章于 2024-07-18 15:09:36 发布

vision_seven7

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量178

点赞数

分类专栏：前端文章标签： html5 canvas

本文链接：https://blog.csdn.net/vision_seven7/article/details/107476772

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

canvas画布

初始canvas

<canvas id="myCanvas">
            您的浏览器版本过低，请更新浏览器
</canvas>

canvas 就是画布的意思

获取canvas元素
搭建canvas绘制环境(我们所有的绘制行为都是在这个环境下进行的)
在内存绘制（仅仅存在于内存中我们看不到）
绘制到页面上(调用stroke方法)

搭建canvas画布的绘制环境：

var ctx = canvas.getContext("2d")

使用moveTo和lineTo 只是在内存里面创建了一条路线：

ctx.moveTo(0,0); //移动到绘制的新目标点
ctx.lineTo(100,100);//新的目标点

绘制到页面：

ctx.stroke()

设置画布大小

行内设置画布大小

<canvas id="myCanvas" width="200" height="200"></canvas>

画布的宽高在js里面也可以设置

ctx.moveTo(0, 0);
ctx.lineTo(100, 100);

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="200" style="border:1px solid black;">
    Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    cxt.moveTo(0, 0);
    cxt.lineTo(200, 200);
    cxt.stroke();
</script>
</body>
</html>

在这里插入图片描述

画布中画图

给线条设置颜色

ctx.strokeStyle = "plum"

画圆

ctx.arc(300, 300, 50, 0, 2*Math.PI, true)

参数

 参数1和参数2 ：表示圆心的坐标
 参数3   表示圆的大小  半径
 参数4   是圆的起始角度
 参数5   是圆的结束时的角度
 参数6   是规定画圆是沿着顺时针还是逆时针  true表示逆时针
 画一个整圆是 0到2π

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 开始绘制路径
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
// 绘制圆的路径**
ctx.arc(100, 100, 50, 0, Math.PI * 2, false);

// 0°是从三点钟方向开始的

// 描边路径
ctx.stroke();

画矩形

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.strokeRect(100, 100, 200, 200)

四个参数：
		参数1 参数2  表示的是矩形左上角那个点的坐标
		参数3 参数4  表示的是矩形的宽高

和绘制圆相比绘制矩形并没有调用stroke方法因为strokeRect方向将stroke方法封装到里面去了

画闭合图形

closePath方法就是用来闭合路径的
beginPath 清空所有路径
closePath 闭合路径

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闭合路径</title>
</head>
<body>
 
<div id="container">
    <canvas id="cavsElem">
        你的浏览器不支持canvas，请升级浏览器
    </canvas>
</div>
 
<script>
    (function(){
        var canvas = document.querySelector( '#cavsElem' );
        var ctx = canvas.getContext( '2d' );
 
        canvas.width = 600;
        canvas.height = 600;
        canvas.style.border = '1px solid red';
 
        ctx.lineWidth = 10;
        ctx.moveTo(100,100);
        ctx.lineTo(500,100);
        ctx.lineTo(400,500);
        ctx.lineTo(100,300);
        ctx.closePath();//闭合路径
        ctx.strokeStyle = 'red';
        ctx.stroke();
    }());
</script>
</body>
</html>

在这里插入图片描述

填充和描边

**设置描边线条的宽度：**lineWidth

ctx.lineWidth = 10;

**描边：**stroke

ctx.stroke()

填充样式： fillStyle
边线样式： strokeStyle

var canvas = document.getElementById("myCanvas");
        // 设置绘制环境
        var ctx = canvas.getContext("2d");

        canvas.width = 600;
        canvas.height = 400;

       
        // 设置描边线条的宽度
        ctx.lineWidth = 10;

        ctx.strokeStyle = "plum"

        // stroke是描边
        ctx.stroke()

        ctx.fillStyle = "pink"
        // 填空 其实填充和描边是可以同时调用的
        ctx.fill();

        // 调用画矩形的方法 其实和分开调用stroke和fill是一样的
        ctx.strokeRect(300, 300, 200, 100)
        ctx.fillRect(100, 100, 200, 100)

       
        ctx.fillStyle = "pink"
        // ctx.stroke();
        ctx.fill()

vision_seven7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5C3-画布

canvas画布初始canvas设置画布大小画布中画图给线条设置颜色画圆画矩形画闭合图形填充和描边初始canvas<canvas id="myCanvas"> 您的浏览器版本过低，请更新浏览器</canvas>canvas 就是画布的意思获取canvas元素搭建canvas绘制环境(我们所有的绘制行为都是在这个环境下进行的)在内存绘制（仅仅存在于内存中我们看不到）绘制到页面上(调用stroke方法)搭建canvas画布的绘制环境：
复制链接

扫一扫

专栏目录