网页游戏开发基础（一）01-画布元素的使用——绘制线条

最新推荐文章于 2022-08-27 14:29:41 发布

viceen

最新推荐文章于 2022-08-27 14:29:41 发布

阅读量343

点赞数

分类专栏：可视化文章标签： canvas js

本文链接：https://blog.csdn.net/weixin_44867717/article/details/119277806

版权

可视化专栏收录该内容

130 篇文章 79 订阅

订阅专栏

页面游戏开发基础

理解并掌握使用画布元素开发游戏的步骤、技巧和发布过程，并能手动地使用画布开发一个页面游戏。

第1章画布元素的使用

第1节绘制线条

画布的作用

Canvas 元素作为HTML5标准的一部分，允许你通过脚本动态渲染图像。每一个 canvas 元素都有一个上下文环境对象，在其中可以绘制任意图形。
坐标的介绍

在这里插入图片描述

简单的使用
1. 在页面中添加画布元素
2. 获取画布元素的上下文环境对象
3. 使用上下文环境对象绘制图形，保存在内存中
4. 绘制一个线条
```
//设置画布的起始点
context.moveTo(x,y);
//从当前位置绘制直线到x,y坐标
context.lineTo(x,y);
```

绘制一条直线——使用步骤：

1、添加一个画布元素
2、工具集
3、使用工具集
4、绘制一个起始点
5、绘制一个终止点
6、用画笔描点

moveTo(x,y) 定位一个开始坐标点
lineTo(x,y) 在当前坐标基础绘制一条线到x,y

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <canvas id="cvs" style="border: solid 1px #ccc"></canvas>

    <script type="text/javascript">
        //获取画布元素
        var cvs=document.getElementById("cvs");
        //获取工具集
        var cxt=cvs.getContext("2d");

        //定位开始点
        cxt.moveTo(30,30);

        //拖动并结束点
        cxt.lineTo(90,30)  //保存内存

        //绘制点
        cxt.stroke();
    </script>
</body>
</html>