HTML5 Canvas笔记——橡皮筋式绘图
2020-04-20 本文已影响0人
没昔
编程实现：橡皮筋式绘图。
参考书目：《HTML5 Canvas核心技术 图形、动画与游戏开发》
html
<!DOCTYPE html>
<html>
<head>
<title>Drawing Lines with Rubber Bands</title>
<style>
body{
background: #eeeeee;
}
#controls{
position: absolute;
left: 25px;
top: 25px;
}
#canvas{
background: #ffffff;
cursor: pointer;
margin-left: 10px;
margin-top: 10px;
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400">
Canvas not supported
</canvas>
<div id="controls">
Stroke color:<select id="strokeStyleSelect">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="orange">orange</option>
<option value="cornflowerblue">cornflowerblue</option>
<option value="goldenrod">goldenrod</option>
<option value="navy">navy</option>
<option value="purple">purple</option>
</select>
Guidewires:
<input id="guidewireCheckbox" type="checkbox" checked/>
<input id="eraseAllButton" type="button" value="Eraes all"/>
</div>
<script src="2-16.js"></script>
</body>
</html>
js
var canvas=document.getElementById("canvas"),
context=canvas.getContext("2d"),
eraseAllButton=document.getElementById("eraseAllButton"),
strokeStyleSelect=document.getElementById("strokeStyleSelect"),
guidewireCheckbox=document.getElementById("guidewireCheckbox"),
drawingSurfaceImageData,
mousedown={},
rubberbandRect={},
dragging=false,
guidewires=guidewireCheckbox.checked;
function drawGrid(color, stepx, stepy) { //画网格线
context.strokeStyle=color; //描边颜色为color
context.lineWidth=0.5; //线宽为0.5px
for (var i=stepx+0.5;i<context.canvas.width;i+=stepx){ //画网格线中的竖直线条
context.beginPath(); //开始绘制新路径
context.moveTo(i,0); //将绘图游标移动到(i,0)，不画线
context.lineTo(i,context.canvas.height); //从上一点开始绘制一条直线，到(i,context.canvas.height)为止
context.stroke(); //对路径进行描边
}
for (var i=stepy+0.5;i<context.canvas.height;i+=stepy){ //画网格线中的水平线条
context.beginPath(); //开始绘制新路径
context.moveTo(0,i); //将绘图游标移动到(0,i)，不画线
context.lineTo(context.canvas.width,i); //从上一点开始绘制一条直线，到(context.canvas.width,i)为止
context.stroke(); //对路径进行描边
}
}
function windowToCanvas(x,y){
var bbox=canvas.getBoundingClientRect()//getBoundingClientRect 返回元素的6个值 left top right bottom width height
return {
x:x-bbox.left*(canvas.width/bbox.width),
y:y-bbox.top*(canvas.height/bbox.height)
}
}
function saveDrawingSurface(){
drawingSurfaceImageData=context.getImageData(0,0,canvas.width,canvas.height)
//getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。
}
function restoreDrawingSurface(){
context.putImageData(drawingSurfaceImageData,0,0)
//putImageData() 方法将图像数据（从指定的 ImageData 对象）放回画布上。
}
function updateRubberbandRectangle(loc){
rubberbandRect.width=Math.abs(loc.x-mousedown.x) //用绝对值求线段的长度
rubberbandRect.height=Math.abs(loc.y-mousedown.y) //用绝对值求线段的高度
if(loc.x>mousedown.x){rubberbandRect.left=mousedown.x}else{
rubberbandRect.left=loc.x
}
if(loc.y>mousedown.y){rubberbandRect.top=mousedown.y}else{
rubberbandRect.top=loc.y
}
}
function drawRubberbandShape(loc){
context.beginPath()
context.moveTo(mousedown.x,mousedown.y)
context.lineTo(loc.x,loc.y)
context.stroke()
}
function updataRubberband(loc){ //loc是鼠标点在canvas上的坐标集合对象
// updateRubberbandRectangle(loc)
drawRubberbandShape(loc)
}
//这三个函数式辅助线函数
function drawHorizontalLine(y){
context.beginPath()
context.moveTo(0,y+0.5)
context.lineTo(context.canvas.width,y+0.5)
context.stroke()
}
function drawVerticalLine(x){
context.beginPath()
context.moveTo(x+0.5,0)
context.lineTo(x+0.5,context.canvas.height)
context.stroke()
}
function drawGuidewires(x,y){
context.save()
context.strokeStyle="rgba(0,0,230,0.4)"
context.lineWidth=0.5;
drawVerticalLine(x)
drawHorizontalLine(y)
context.restore()
}
//这三个函数式辅助线函数
canvas.onmousedown=function(e){ //只执行一次
var loc=windowToCanvas(e.clientX,e.clientY); //获取鼠标点在canvas的点坐标
e.preventDefault();
saveDrawingSurface() //复制canvas画布的像素
mousedown.x=loc.x; //鼠标点击的x轴坐标 这里mousedown记录的是初始位置
mousedown.y=loc.y; //鼠标点击的y轴坐标 这里mousedown记录的是初始位置
dragging=true;
}
canvas.onmousemove=function(e){
var loc;
if(dragging){
e.preventDefault()
loc=windowToCanvas(e.clientX,e.clientY);
restoreDrawingSurface()
updataRubberband(loc) //loc是鼠标点在canvas上的坐标集合对象
if(guidewires){ //辅助线
drawGuidewires(loc.x,loc.y)
}
}
}
canvas.onmouseup=function(e){
loc=windowToCanvas(e.clientX,e.clientY)
restoreDrawingSurface()
updataRubberband(loc)
dragging=false
}
eraseAllButton.onclick=function(e){
context.clearRect(0,0,canvas.width,canvas.height);
drawGrid('lightgray',10,10);
saveDrawingSurface();
}
strokeStyleSelect.onchange=function(){
context.strokeStyle=strokeStyleSelect.value
}
guidewireCheckbox.onchange=function(e){
guidewires=guidewireCheckbox.checked;
}
context.strokeStyle=strokeStyleSelect.value;
drawGrid('lightgray',10,10);
效果如图：
图片1.png
