2.canvas路径

最新推荐文章于 2023-04-25 10:36:58 发布

月半拂晓

最新推荐文章于 2023-04-25 10:36:58 发布

阅读量638

点赞数 2

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

本文链接：https://blog.csdn.net/singlow123/article/details/50619883

版权

Web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

canvas路径

canvas路径指存以贝塞尔曲线为理论基础的区域绘制方式，绘制时产生的线条称为路径。具体百度

创建canvas之前首先得创建一个html canvas标签

<canvas id="canvas" width="400" height="500"></canvas>

1.画布环境

<script type="text/javascript">
    // 首先获取canvas对象
    var canvas = document.getElementById('canvas');
    // 通过canvas对象的getContext方法创建一个2d画布
    var ctx = canvas.getContext('2d');
</script>

在H5中创建的的canvas标签只是提供了画布创建的基础环境，而并未真正意义创建画布。创建画布的工作全由H5提供给js的API完成。

2.canvas中有关路径的API

ctx.beginPath(); 起始一条路径，或重置当前路径(在canvas的路径规则中，如果上一个点未被关闭，下一段路径的起始点将以上一个点作为起始点)

<script type="text/javascript">
    // 起始一条路径
    ctx.beginPath();
</script>

ctx.moveTo(x , y); 把路径起始点移动到画布中的指定点（这个时候并未创建点）

<script type="text/javascript">
    // 起始一条路径
    ctx.beginPath();
    // 将路径起始点移动到画布中心位置
    ctx.moveTo(200 , 250);
</script>

ctx.lineTo(x , y); 在画布中添加一个新的点，然后将起始点和结束点连接起来

<script type="text/javascript">
    // 起始一条路径
    ctx.beginPath();
    // 将路径起始点移动到画布中心位置
    ctx.moveTo(200 , 250);
    // 将路径结束点指定在画布原点位置
    ctx.lineTo(0 , 0);
</script>

ctx.closePath(); 关闭路径，还有一个功能就是自动地将起始点与最终的结束点连接起来

<script type="text/javascript">
    // 起始一条路径
    ctx.beginPath();
    // 将路径起始点移动到画布中心位置
    ctx.moveTo(200 , 250);
    // 将路径结束点指定在画布原点位置
    ctx.lineTo(0 , 0);
    // 关闭路径
    ctx.closePath();
    // 绘制路径(只有当执行此操作时，路径才真正在画布上绘制)
    ctx.stroke();
</script>

3.canvas示例

1.canvas矩形封装

下面我们通过一个路径的封装来实现ctx.strokeRect(x,y,width,height)功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>strokeRect封装</title>
        <style type="text/css">
            canvas{
                background-color: #ccc;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d');

                /**
                 * 模拟H5 canvas strokeRect封装
                 * @param {Object} x
                 * @param {Object} y
                 * @param {Object} width
                 * @param {Object} height
                 */
                function strokeRect(x , y , width , height){
                    ctx.beginPath();
                    ctx.moveTo(x , y);
                    ctx.lineTo(x + width , y);
                    ctx.lineTo(x + width , y + height);
                    ctx.lineTo(x , y + height);
                    ctx.closePath();
                    ctx.stroke();
                }
                // 调用自定义函数
                strokeRect(0 , 0 , 300 , 300);
            }
        </script>
    </head>
    <body>
        <canvas id="canvas" width="800" height="600"></canvas>
    </body>
</html>

2.简易画图板功能

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简易画图板功能</title>
        <style>
            canvas{
                background-color: #ccc;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d');

                // 绑定鼠标按下事件
                canvas.onmousedown = function(e){
                    ctx.beginPath();
                    ctx.moveTo(e.layerX,e.layerY);

                    // 绑定鼠标移动事件
                    canvas.onmousemove = function(e){
                        ctx.lineTo(e.layerX,e.layerY);
                        ctx.stroke();
                    }

                    // 绑定鼠标抬起事件
                    canvas.onmouseup = function(){
                        canvas.onmousemove = null;
                        canvas.onmouseup = null;
                    }

                }
            }
        </script>
    </head>
    <body>
        <canvas id="canvas" width="800" height="600"></canvas>
    </body>
</html>

月半拂晓

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
2.canvas路径

canvas路径canvas路径指存以贝塞尔曲线为理论基础的区域绘制方式，绘制时产生的线条称为路径。具体百度创建canvas之前首先得创建一个html canvas标签<canvas id="canvas" width="400" height="500"></canvas>1.画布环境<script type="text/javascript"> // 首先获取canvas对象 v
复制链接

扫一扫

专栏目录