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

最新推荐文章于 2023-05-16 13:43:49 发布

MIKUScallion

最新推荐文章于 2023-05-16 13:43:49 发布

阅读量7.5k

点赞数 4

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

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

版权

使用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

最低0.47元/天解锁文章

MIKUScallion

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Canvas---Canvas版画图，坐标轴绘制，网格绘制，橡皮筋式画直线

使用Canvas实现画图程序。这个量还是比较大的，请允许我慢慢来。目前做到了：坐标轴的绘制，网格绘制，橡皮筋式画直线目前的不足：没有应用多个图层将网格，坐标轴与实际绘画区域分离接下要做：为橡皮筋式画直线添加上辅助线选项-----------------------------------------------------------------------------
复制链接

扫一扫