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