Canvas---Canvas版画图、虚线、辅助线、线条颜色、线条宽度，整合加强版

最新推荐文章于 2024-07-07 22:18:15 发布

MIKUScallion

最新推荐文章于 2024-07-07 22:18:15 发布

阅读量9.8k

点赞数 3

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

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

版权

这篇博客详细介绍了如何使用Canvas实现画图程序，包括虚线与实线的切换、辅助线的添加、线条颜色选择和线条宽度调整等功能。作者在代码整理过程中发现了新的优化技巧，并提供了效果截图和完整的源代码供读者参考学习。

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

使用Canvas实现画图程序。

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

虚线实线的选择、辅助线、线条颜色选择、线条宽度选择

进一步整理了下代码，发现了不少很有用的写法，具体看下面。

效果截图：

源代码：

①HTML代码

<!docutype html>
<!--date 2014-12-28-->
<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>
            </select>
            线条颜色<select id="strokeColorSelectBox">
                    <option value="black">black</option>
                    <option value="red">red</option>
                    <option value="blue">blue</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 typ

最低0.47元/天解锁文章

MIKUScallion

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Canvas---Canvas版画图、虚线、辅助线、线条颜色、线条宽度，整合加强版

使用Canvas实现画图程序。本次更新主要实现了一下功能：虚线实线的选择、辅助线、线条颜色选择、线条宽度选择进一步整理了下代码，发现了不少很有用的写法，具体看下面。 canvas{ background-color: rg
复制链接

扫一扫

专栏目录