Canvas---Canvas版画图，坐标轴绘制，网格绘制，橡皮筋式画直线

最新推荐文章于 2024-09-25 08:00:00 发布

MIKUScallion

最新推荐文章于 2024-09-25 08:00:00 发布

阅读量7.6k

点赞数 4

分类专栏：源代码文章标签： html Canvas javascript

本文链接：https://blog.csdn.net/MIKUScallion/article/details/43115917

版权

这篇博客介绍了如何利用HTML的Canvas元素进行画图操作，包括坐标轴的绘制、网格的生成以及采用橡皮筋方式画直线的功能。虽然目前尚未实现图层分离，但计划添加辅助线选项以增强用户体验。

摘要由CSDN通过智能技术生成

使用Canvas实现画图程序。

这个量还是比较大的，请允许我慢慢来。

目前做到了：坐标轴的绘制，网格绘制，橡皮筋式画直线

目前的不足：没有应用多个图层将网格，坐标轴与实际绘画区域分离

接下要做：为橡皮筋式画直线添加上辅助线选项

----------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

下面是源码：

①本体代码

<!docutype html>
<!--date 2014-12-28-->
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            canvas{
                
            }
        </style>
        <script type = "text/javascript" src ="mikuCanvasAxes.js"></script>
    </head>
    <body>
        <div class="controls">
            网格线<input  id="gridCheckBox" type="checkbox" checked="checked" >
            坐标轴<input  id="axesCheckBox" type="checkbox" checked="checked" >
            <input type="button" value="清除画布" id="eraseAllButton">
        </div>
        <!--canvas默认大小300*150-->
        <canvas id="canvas" width="800" height="500">
        </canvas>
    </body>
    <script type="text/javascript">
        //Vars--------------------------------------------------------
        var canvas =document.getElementById("canva