Canvas入门

最新推荐文章于 2022-06-08 15:51:30 发布

EffIdong

最新推荐文章于 2022-06-08 15:51:30 发布

阅读量557

点赞数

分类专栏： javascript html5 文章标签： canvas

本文链接：https://blog.csdn.net/Efficiency9/article/details/74852438

版权

javascript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html5

3 篇文章 0 订阅

订阅专栏

是什么
canvas–画布，canvas是HTML5的一个标签
用来定义图形，提供了强大的图片处理功能，但是需要注意的是canvas并不绘制图形，只是一张画布，我们要通过脚本在上面绘制图形。

能做什么
基本图形绘制（直线、三角形、矩形、图标等）
文字绘制
图形变形和图片合成
图片以及视频的处理
动画实现
小游戏制作

IE8及以下不支持canvas标签

如何定义画布
- 在html中引入canvas标签
- 定义canvas宽高
- 默认width=’300’,height=’150’
- 我们不能通过style=’width:500px;height:500px’设置其宽高，这样相当于强行拉伸了画布，从而导致问题,正确方式下面会讲到。
- 定义canvas样式（背景色、边框等）（通过style）

如何绘画
首先我们要通过脚本找到画布

<script type="text/javascript">

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

    // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象
    //这里一定要是2d，不能是2D
    var ctx = canvas_1.getContext("2d");

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

canvas的坐标轴

画一条直线
我们需要知道线的起点，线的终点，线的颜色、线的宽度四大要素
开始定义路径：beginpath()
线的起点：moveTo(x坐标，y坐标）
线的终点：lineTo(x坐标，y坐标)
关闭路径：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>

这样我们在浏览器上还看不到效果，我们需要定义线的宽度以及颜色

设置笔触线条的宽度：lineWdth()-
设置填充路径使用的填充风格以及颜色：fillStyle()
把定义的填充上：fill();
设置绘制 canvas 路径的填充风格(线框)：strokeStyle();
填充 canvas 当前路径绘制边框:stroke()
填充风格支持的属性
- 符合颜色格式的字符串值，表示使用纯色填充
- CanvasGradient，表明使用渐变填充
- CanvasPattern，表明使用位图填充

    var canv=document.getElementById("canvas1");
    var ctx=canv.getContext("2d");
    console.log(ctx)
    ctx.beginPath();
    ctx.moveTo(10,50);
    ctx.lineTo(200,50);
    ctx.closePath();
    ctx.lineWidth=50;
    ctx.lineJoin="round"
    ctx.strokeStyle="red";
    ctx.stroke();
    ctx.fillStyle='blue';
    ctx.fill();

绘制三角形以及矩形

    var canv=document.getElementById("canvas1");
    var ctx=canv.getContext("2d");
    console.log(ctx)
    ctx.beginPath();
    ctx.moveTo(10,50);
    ctx.lineTo(200,50);
    ctx.lineTo(200,200);
    ctx.lineTo(10,200);
    ctx.closePath();
    ctx.lineWidth=50;
    ctx.lineJoin="round"
    ctx.strokeStyle="red";
    ctx.stroke();
    ctx.fillStyle='blue';
    ctx.fill();

以上代码是矩形绘制
设置图形的边角属性

lineJoin
- bevel 创建斜角
- round 创建圆角
- miter 默认，创建尖角

总结
今天简单的了解了canvas历史以及基本用途，同时用代码
主要练习了canvas的直线以及基本图形画法
圆圈画法用到arc属性。稍后练习

EffIdong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas入门

是什么 canvas–画布，canvas是HTML5的一个标签用来定义图形，提供了强大的图片处理功能，但是需要注意的是canvas并不绘制图形，只是一张画布，我们要通过脚本在上面绘制图形。能做什么基本图形绘制（直线、三角形、矩形、图标等）文字绘制图形变形和图片合成图片以及视频的处理动画实现小游戏制作IE8及以下不支持canvas标签如何定义画布 - 在html中引入
复制链接

扫一扫