3.4.1.1_光标的擦除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>光标的擦除</title>
<style>
body{
background: #eee;
}
#canvas{
background: #fff;
cursor: pointer;
margin-left: 10px;
margin-top: 10px;
box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
-moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
}
#controls{
position: absolute;
left: 25px;
top: 25px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
<div id="controls">
字体:
<select id="fontStyleSelect">
<option value="palatino">palatino</option>
<option value="lucida">lucida</option>
<option value="fantasy">fantasy</option>
<option value="copperplate">copperplate</option>
<option value="tahoma" selected>tahoma</option>
<option value="verdana">verdana</option>
<option value="impact">impact</option>
<option value="century">century</option>
</select>
字体大小:
<select id="fontSizeSelect">
<option value="20px" selected>20px</option>
<option value="30px">30px</option>
<option value="40px">40px</option>
<option value="50px">50px</option>
<option value="60px">60px</option>
</select>
字体填充颜色:
<select id="fontColorSelect">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="orange">orange</option>
<option value="cornflowerblue" selected>cornflowerblue</option>
<option value="goldenrod">goldenrod</option>
<option value="navy">navy</option>
<option value="purple">purple</option>
</select>
</div>
</body>
<script>
TextCursor = function (width,fillStyle){
this.width = width || 2;
this.fillStyle = fillStyle || 'rgba(0,0,0,0.5)';
this.left = 0;
this.top = 0;
};
TextCursor.prototype = {
getHeight:function(context){
var h = context.measureText('M').width;
return h+h/6;
},
createPath:function(context){
context.beginPath();
context.rect(this.left,this.top,this.width,this.getHeight(context));
},
draw:function(context,left,bottom){
context.save();
this.left = left;
this.top = bottom -this.getHeight(context);
this.createPath(context);
context.fillStyle = this.fillStyle;
context.fill();
context.restore();
},
erase:function (context,imageData){
context.putImageData(imageData,0,0,this.left,this.top,this.width,this.getHeight(context));
console.log(this.left,this.top,this.width,this.getHeight(context));
}
}
</script>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var fontStyleSelect = document.getElementById('fontStyleSelect');
var fontSizeSelect = document.getElementById('fontSizeSelect');
var fontColorSelect = document.getElementById('fontColorSelect');
var drawingSurfaceImageData;
var fillStyle = fontColorSelect.value;
var str = fontSizeSelect.value +' '+ fontStyleSelect.value;
var cursor= new TextCursor(2,fillStyle); ;
saveDrawingSurface();
canvas.onmousedown = function(e){
var loc = windowToCanvas(e.clientX,e.clientY);
context.font = str;
cursor.fillStyle = fillStyle;
cursor.erase(context,drawingSurfaceImageData);
cursor.draw(context,loc.x,loc.y);
}
fontStyleSelect.onchange = function(){
str = fontSizeSelect.value +' '+ fontStyleSelect.value;
}
fontSizeSelect.onchange = function(){
str = fontSizeSelect.value +' '+ fontStyleSelect.value;
}
fontColorSelect.onchange = function (){
fillStyle = fontColorSelect.value;
}
function windowToCanvas(x,y){
var bbox = canvas.getBoundingClientRect();
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);
}
</script>
</html>