3.4.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();
}
}
</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 fillStyle = fontColorSelect.value;
var str = fontSizeSelect.value +' '+ fontStyleSelect.value;
var cursor = new TextCursor(2,fillStyle);
canvas.onmousedown = function(e){
var loc = windowToCanvas(e.clientX,e.clientY);
context.font = str;
cursor.fillStyle = fillStyle;
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)
}
};
</script>
</html>
转载请注明原文地址: https://www.6miu.com/read-96293.html
