canvas基础(一)

最新推荐文章于 2022-07-05 17:11:42 发布

无声的code

最新推荐文章于 2022-07-05 17:11:42 发布

阅读量151

点赞数

分类专栏： canvas 前端

本文链接：https://blog.csdn.net/weixin_40542544/article/details/103858590

版权

前端同时被 2 个专栏收录

51 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 1 订阅

订阅专栏

前言
写了好多canvas的例子了，动画也写了很多，cnavas一直是我感兴趣的动画，刚好年末有时间，抽空更新下canvas.
1. canvas 简介
1.1是HTML5中重要的元素,和audio、video元素类似完全不需要任何外部插件就能够运行.
Canvas中文翻译就是”画布”.它提供了强大的图形的处理功能(绘制,变换,像素处理…)。
但是需要注意，canvas 元素本身并不绘制图形，它只是相当于一张空画布。
如果开发者需要向 canvas 上绘制图形，则必须使用 JavaScript 脚本进行绘制。
1.2 canvas 能够做什么？
基础图形的绘制
文字的绘制
图形的变形和图片的合成
图片和视频的处理
动画的实现
小游戏的制作
1.3 支持的浏览器
大多数现代浏览器都是支持Canvas的,比如 Firefox, safari, chrome, opera的最近版本以及IE9都支持.
IE8及以下不支持HTML5,但是我们可以进行提示用户更新到最新的版本
2.canvas 实战
2.1 查看当前浏览器对 canvas 的支持情况

2.1.1这时候我们可以直接在 canvas 标签之间去书写内容，这么做的好处是当你的浏览器不支持 canvas 的时候，我们可以去展示标签之间的内容
2.1.2 当然也可以通过js去判断，浏览器支不支持

2.2 修改 Canvas 的画布
按照我们正常的思路来说，我们会直接去使用 canvas_1.style.width = “500px”; 来去修改我们的 canvas 的宽度，但是这样真的对么？
答案当然是否定的，canvas 相当于是一张图片，如果我们设置 .
这样写相当于图片的实际大小是 500 * 500.
但是，假如我们这样去书写。

这样实际是把 canvas 默认的 300 * 150 的图片强行拉伸为 500px * 500px 了，所以这样会导致我们的内容被强行缩放，从而导致问题

2.3 获取绘制环境
我们在上面已经设置了我们的画布的大小，但是存在一个问题。
我们还没有找到我们的画布呀！~
要是我们连具体的画布都没有，我们又该向哪里去绘画呢？
实际上我们可以通过 var ctx = canvas_1.getContext(“2d”); 来去获取到我们的绘制环境。

2.4 绘制的坐标轴
注意下，横轴向右是正，纵轴向下是正。
在这里插入图片描述

2.5 绘制直线
我们既然要画一条直线，我们是不是至少应该有这么几个条件呢？
线的起点
线的终点
线的颜色
线的宽度
所以我们接下来，就需要开始我们的代码书写了
我们需要一些工具，需要具体的方法。

方法	说明
beginPath()	开始定义路径
closePath()	关闭前面定义的路径
moveTo(float x,float y)	把 canvas 的当前路径的结束点移动到 x, y 对应的点
lineTo(float x,float y)	把 canvas 的当前路径从当前结束点连接到 x , y 对应的点

需要注意，moveTo 可以简单理解为，把当前绘制图像的起点设置为某一特定坐标，而 lineTo 则是将当前的起点和你想要设置的那个点之间连接起来。

而 beginPath 是表示开始定义路径，不会产生特殊的效果。而 closePath 除了表示关闭当前定义的路径之外，还会有一个特殊的作用，就是可以将当前绘制图形的最后一个点和我们绘制图形开始的点进行连接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
            当前浏览器不支持 canvas
        </canvas>
    </div>
</body>
<script type="text/javascript">
    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_1");
    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");
    // 打印一下，查看是否能够显示具体环境
    console.log(ctx);
    // 开始绘制
    ctx.beginPath();
    //设置绘制起点
    ctx.moveTo(0,0);
    //设置绘制下一个点
    ctx.lineTo(700,400);
    //结束绘制
    ctx.closePath();
</script>
</html>

没有对吧，所以咯，我们还需要有其他的方法去进行配合

-	-
fill()	填充 canvas 当前路径
stroke()	填充 canvas 当前路径绘制边框

可是这条线一直是灰色的呀，好丑，我们想要自己去修改我们的线，该怎么做呢？

-	-
fillStyle()	设置填充 canvas 路径所使用的填充风格
strokeStyle()	设置绘制 canvas 路径的填充风格

他们两个都支持三个属性值。

1.符合颜色格式的字符串值，表示使用纯色填充
2.CanvasGradient，表明使用渐变填充
3.CanvasPattern，表明使用位图填充
除此之外，我们还可以设置一下线的宽度。lineWidth()

2.6 绘制三角形
我们已经创建了这一条线段，那么我们平常开发中不会仅仅让你去绘制一条线吧，最起码我们需要会绘制出一个小的三角形吧。
这时候我们就需要再去绘制两条线了。
怎么去添加线呢？lineTo对吧

    //设置绘制起点
    ctx.moveTo(100,100);
    //设置绘制下一个点
    ctx.lineTo(700,400);
    //设置绘制下一个点
    ctx.lineTo(400,100);

这时候神奇的事情发生了，我们的三角形直接就出现了，可是我们仅仅绘制了两条线呀
还记得上面对 closePath 的描述么？
这时因为当我们结束绘制的，电脑会自动将你设置的线段自动连接起来。
当然这里也是可以设置填充方法的
这里贴下代码吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
            当前浏览器不支持 canvas
        </canvas>
    </div>
</body>
<script type="text/javascript">

    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_1");

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

    // 打印一下，查看是否能够显示具体环境
    console.log(ctx);

    // 开始绘制
    ctx.beginPath();

    //设置绘制起点
    ctx.moveTo(100,100);

    //设置绘制下一个点
    ctx.lineTo(700,400);

    //设置绘制下一个点
    ctx.lineTo(400,100);

    //设置绘制下一个点
    ctx.lineTo(600,500);

    //结束绘制
    ctx.closePath();

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

    //设置绘制的样式
    ctx.strokeStyle = "red";

    //绘制点之间的线路
    ctx.stroke();

    // 设置填充样式
    ctx.fillStyle = "green";

    // 填充当前视图
    ctx.fill();

    // 注意：所有的绘制相应属性全部应该放在 closePath 之前

</script>
</html>

这里附带讲讲其它属性吧
lineJoin: 设置返回所创建边角的类型，当两条线交汇时。
bevel: 创建斜角
round:创建圆角
miter:创建尖角

2.7 绘制矩形
strokeRect(float x,float y,float width,float height): 绘制一个矩形边框
fillRect(float x,float y,float width,float height) :填充一个边框

不多说，上代码，其它属性和画三角形的差不多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>绘制矩形</h2>
        <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
            当前浏览器不支持 canvas
        </canvas>
    </div>
</body>
<script type="text/javascript">
    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_1");

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

    // 设置填充颜色
    ctx.fillStyle = '#f00';
    // 填充一个矩形
    ctx.fillRect(30,20,120,60);

    // 设置填充颜色
    ctx.fillStyle = '#ff0';
    // 填充一个矩形
    ctx.fillRect(80,60,120,60);

    // 设置填充颜色
    ctx.strokeStyle = '#00f';
    // 填充一个矩形
    ctx.strokeRect(30,130,120,60);
    // 设置线条宽度
    ctx.lineWidth = 20;

    // 设置线条宽度
    ctx.lineJoin = "round";
    // 设置填充颜色
    ctx.strokeStyle = '#0ff';
    // 填充一个矩形
    ctx.strokeRect(80,160,120,60);


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


    ctx.storke();

</script>
</html>

2.8 绘制字符串
fillText(String Text, float x, float y, [float maxWidth])：填充字符串;
strokeText(String Text, float x, float y, [float maxWidth]): 绘制字符串边框;
textAlign:设置绘制字符串的水平对齐方式(start、end、left、right、center等)
textBaseAlign:设置绘制字符串的垂直对齐方式(top、hanging、middle、alphabetic、idecgraphic、bottom 等;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <h2>绘制文字</h2>
        <canvas id="canvas_1" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
            当前浏览器不支持 canvas
        </canvas>
    </div>
</body>
<script type="text/javascript">
    // 获取 canvas 元素对应的 DOM 对象
    var canvas_1 = document.getElementById("canvas_1");
    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    var ctx = canvas_1.getContext("2d");
    ctx.fillStyle = '#00f';
    ctx.font = 'italic 50px 隶书';
    ctx.textBaseline = 'top';
    //填充字符串
    ctx.fillText('李先生真是帅',0,0);
    ctx.strokeStyle = 'f0f';
    ctx.font = 'bold 45px 宋体';
    // 绘制字符串的边框
    ctx.strokeText('李鹏李鹏我爱你',0,50,200);
</script>
</html>

2.9 设置阴影
废话不多说，分为盒阴影和文字阴影
shadowBlur 设置阴影的模糊程度。该值是一个浮点数，该数值越大，阴影的模糊程度也就越大。
shadowColor 设置阴影的颜色。
shadowOffsetX 设置阴影在 X 方向的偏移
shadowOffsetY 设置阴影在 Y 方向的偏移

最后点个赞呗

无声的code

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas基础(一)

前言写了好多canvas的例子了，动画也写了很多，cnavas一直是我感兴趣的动画，刚好年末有时间，抽空更新下canvas.1. canvas 简介1.1是HTML5中重要的元素,和audio、video元素类似完全不需要任何外部插件就能够运行.Canvas中文翻译就是”画布”.它提供了强大的图形的处理功能(绘制,变换,像素处理…)。但是需要注意，canvas 元素本身并不绘制图形，它只...
复制链接

扫一扫

专栏目录