Canvas---Canvas版画图、圆角矩形、圆形、矩形、图形填充、mvc模式重新整合代码版

最新推荐文章于 2023-10-13 14:12:47 发布

MIKUScallion

最新推荐文章于 2023-10-13 14:12:47 发布

阅读量6k

点赞数 3

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

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

版权

使用Canvas实现画图程序。（转载注明出处与作者啊）

本次主要更新了一下功能：

新添加图形：矩形，圆形，圆角矩形

实现了描边颜色与填充颜色的选择

使用类似mvc的模式重新整理了代码。

M层：特殊图形的路径规划代码组成，只包含路径规划，无样式设计。

V层：设计样式，调用路径规划代码，实际绘制图案。在这里完成填充、描边。

C层：判断选择框内容，调用不同的实际绘制代码

其他：事件处理与辅助计算函数等

不足：感觉代码结构还是不够好，果然是我没用面向对象么？

下面是效果图：

下面是源代码：

①本体HTML5代码

<!docutype html>
<!--date 2015-1-27-- by MIKUScallion 首发于CSDN>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <style type="text/css">
            canvas{
                background-color: rgb(247, 247, 247);
                margin-top: 10px;
            }
        </style>
    </head>
    <body>
        <div class="controls">
            图案类型<select id="lineTypeSelectBox">
            <option value="solid">实线</option>
            <option value="dashed">虚线</option>
            <option value="arc">圆形</option>
            <option value="rect">矩形</option>
            <option value="roundedRect">圆角矩形</option>
            </select>
            描边颜色<select id="strokeColorSelectBox">
                    <option value="black">black</option>
                    <option value="red">red</option>
                    <option value="blue">blue</option>
                    <option value="rgba(255, 0, 0, 0)">null</option>
            </select>
            填充颜色<select id="fillColorSelectBox">
                    <option value="rgba(255, 0, 0, 0)">null</option>
                    <option value="#7dce96">green</option>
                    <option value="#db884b">orange</option>
                    <option value="#d88ba9">pink</option>
            </select>
            描边宽度<select id="lineWidthSelectBox">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="4">4</option>
            </select>
            
            网格线<input  id="gridCheckBox" type="checkbox" checked="checked" >
            坐标轴<input  id="axesCheckBox" type="checkbox" checked="checked" >
            辅助线<input  id="guideWiresCheckBox" type="checkbox" checked="checked" >
            <input type="button" value="清除画布" id="eraseAllButton">

最低0.47元/天解锁文章

MIKUScallion

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Canvas---Canvas版画图、圆角矩形、圆形、矩形、图形填充、mvc模式重新整合代码版

使用Canvas实现画图程序。（转载注明出处与作者啊）本次主要更新了一下功能：新添加图形：矩形，圆形，圆角矩形实现了描边颜色与填充颜色的选择使用类似mvc的模式重新整理了代码。M层：特殊图形的路径规划代码组成，只包含路径规划，无样式设计。V层：设计样式，调用路径规划代码，实际绘制图案。在这里完成填充、描边。C层：判断选择框内容，调用不同的实际绘制代码
复制链接

扫一扫