首页 > 代码库 > Canvas---Canvas版画图、虚线、辅助线、线条颜色、线条宽度，整合加强版
Canvas---Canvas版画图、虚线、辅助线、线条颜色、线条宽度，整合加强版
使用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=http://www.mamicode.com/"solid">实线>
②绘制坐标轴与网格
在第一篇里有，我没改动
http://blog.csdn.net/mikuscallion/article/details/43115917
③绘制虚线
//绘制虚线
//传入参数：上下文，起点，终点，虚线间隔
function drawDashedLine(context,x1,y1,x2,y2,dashLength){
//运用三元表达式实现默认参数
dashLength = dashLength===undefined ? 5 : dashLength;
//水平长度
var deltaX = x2 - x1;
//垂直长度
var deltaY = y2 - y1;
//虚线数量
var numDashed = Math.floor(
Math.sqrt(deltaX*deltaX+deltaY*deltaY)/dashLength
);
//开始绘制
context.beginPath();
for(var i=0; i<numDashed;i++){
//这种写法太强大了
//(deltaX/numDashed)是指虚线的长度
context[i%2===0 ? "moveTo":"lineTo"](x1+(deltaX/numDashed)*i,y1+(deltaY/numDashed)*i);
}
//要记得描线啊
context.stroke();
//结束绘制
context.closePath();
}④主要绘图代码
//Vars--------------------------------------------------------
var canvas =document.getElementById("canvas"),
context =canvas.getContext("2d"),
//正在绘制的绘图表面变量
drawingSurfaceImageData,
//鼠标按下相关对象
mousedown = {},
//橡皮筋矩形对象
rubberbandRect = {},
//拖动标识变量
dragging = false;
//控件
//擦除画布的控制
var eraseAllButton = document.getElementById("eraseAllButton");
//坐标轴的控制
var axesCheckBox = document.getElementById("axesCheckBox");
//网格线的控制
var gridCheckBox = document.getElementById("gridCheckBox");
//辅助线的控制
var guideWiresCheckBox = document.getElementById("guideWiresCheckBox");
//线条颜色的控制
var strokeColorSelectBox =document.getElementById("strokeColorSelectBox");
//线条样式的控制
var lineTypeSelectBox = document.getElementById("lineTypeSelectBox");
//线条宽度的控制
var lineWidthSelectBox = document.getElementById("lineWidthSelectBox");
//Functions---------------------------------------------------
//将窗口坐标转换为Canvas坐标
//传入参数：窗口坐标(x,y)
function windowToCanvas(x,y){
//获取canvas元素的边距对象
var bbox = canvas.getBoundingClientRect();
//返回一个坐标对象
//类似json的一种写法
return {
x : x - bbox.left*(canvas.width/bbox.width),
y : y - bbox.top*(canvas.height/bbox.height)
};
}
//保存当前绘图表面数据
function saveDrawingSurface(){
//从上下文中获取绘图表面数据
drawingSurfaceImageData = http://www.mamicode.com/context.getImageData(0,0,canvas.width,canvas.height);>
Canvas---Canvas版画图、虚线、辅助线、线条颜色、线条宽度，整合加强版
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。