Canvas系列—学写一个字

来源:转载




1.HTML




Canvas系列—学写一个字
content=" height = device-height,
width = device-width,
initial-scale = 1.0,
minimum-scale = 1.0,
maximum-scale = 1.0,
user-scalable = no"/>

您的浏览器不支持canvas






清 除

2.handwriting.css

#canvas{
display:block;
margin:0 auto;
}
#controller{
margin:0 auto;
}
.op_btn{
float: right;
margin:10px 0 0 10px;
border:2px solid #aaa;
width:80px;
height:40px;
line-height:40px;
font-size:20px;
text-align:center;
border-radius: 5px 5px;
cursor:pointer;
background-color: white;
font-weight:bold;
font-family: Microsoft Yahei, Arial;
}
.op_btn:hover{
background-color:#def;
}
.clearfix{
clear:both;
}
.color_btn{
float: left;
margin: 10px 10px 0 0;
border:5px solid white;
width:40px;
height:40px;
border-radius: 5px 5px;
cursor:pointer;
}
.color_btn:hover{
border: 5px solid violet;
}
.color_btn_selected{
border: 5px solid blueviolet;
}
#black_btn{
background-color: black;
}
#blue_btn{
background-color: blue;
}
#green_btn{
background-color: green;
}
#red_btn{
background-color: red;
}
#orange_btn{
background-color: orange;
}
#yellow_btn{
background-color: yellow;
}

3.handwriting.js

var canvasWidth = Math.min( 800 , $(window).width() - 20 );
var canvasHeight = canvasWidth;
//画笔默认的颜色
var strokeColor = "black";
//鼠标没有按下
var isMouseDown = false;
//鼠标上一次的位置
var lastLoc = {x:0,y:0};
//上一次时间
var lastTimestamp = 0;
//上一次线条的宽度
var lastLineWidth = -1;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.width = canvasWidth;
canvas.height = canvasHeight;
$("#controller").css("width",canvasWidth+"px");
//绘制米字格
drawGrid();
//清除画板
$("#clear_btn").click(
function(e){
context.clearRect( 0 , 0 , canvas.width, canvas.height );
drawGrid();
}
)
//选择画笔的颜色
$(".color_btn").click(
function(e){
$(".color_btn").removeClass("color_btn_selected");
$(this).addClass("color_btn_selected");
strokeColor = $(this).css("background-color");
}
)
//开始绘制
function beginStroke(point){
isMouseDown = true;
//记录鼠标第一次按下的位置
lastLoc = windowToCanvas(point.x, point.y);
lastTimestamp = new Date().getTime();
}
//结束绘制
function endStroke(){
isMouseDown = false;
}
//绘制直线
function moveStroke(point){
var curLoc = windowToCanvas( point.x , point.y );
var curTimestamp = new Date().getTime();
var s = calcDistance(curLoc,lastLoc);
var t = curTimestamp - lastTimestamp;
//线宽
var lineWidth = calcLineWidth(t,s );
//draw
context.beginPath();
context.moveTo(lastLoc.x,lastLoc.y );
context.lineTo(curLoc.x,curLoc.y);
context.strokeStyle = strokeColor;
context.lineWidth = lineWidth;
//使线条更加平滑
context.lineCap = "round";
context.lineJoin = "round";
context.stroke();
lastLoc = curLoc;
lastTimestamp = curTimestamp;
lastLineWidth = lineWidth;
}
//PC端
//鼠标按键被按下时发生
canvas.onmousedown = function(e){
//阻止浏览器默认事件(此处并无实质的作用) 比如翻页
e.preventDefault();
beginStroke( {x: e.clientX , y: e.clientY} );
};
//鼠标按键被松开时发生
canvas.onmouseup = function(e){
e.preventDefault()
endStroke()
};
//鼠标指针移出指定的对象时发生
canvas.onmouseout = function(e){
e.preventDefault()
endStroke()
};
//鼠标移动时发生
canvas.onmousemove = function(e){
e.preventDefault();
if(isMouseDown){
moveStroke({x: e.clientX , y: e.clientY});
}
};
//手机端
canvas.addEventListener('touchstart',function(e){
e.preventDefault();
touch = e.touches[0];
beginStroke({x: touch.pageX , y: touch.pageY} );
});
canvas.addEventListener('touchmove',function(e){
e.preventDefault();
if( isMouseDown ){
touch = e.touches[0];
moveStroke({x: touch.pageX , y: touch.pageY});
}
});
canvas.addEventListener('touchend',function(e){
e.preventDefault();
endStroke();
});
var maxLineWidth = 30;
var minLineWidth = 1;
var maxStrokeV = 10;
var minStrokeV = 0.1;
//线条的粗细
function calcLineWidth( t , s ){
var v = s / t;
var resultLineWidth;
if( v <= minStrokeV )
resultLineWidth = maxLineWidth;
else if ( v >= maxStrokeV )
resultLineWidth = minLineWidth;
else{
resultLineWidth = maxLineWidth - (v-minStrokeV)/(maxStrokeV-minStrokeV)*(maxLineWidth-minLineWidth);
}
if( lastLineWidth == -1 )
return resultLineWidth;
return resultLineWidth*1/3 + lastLineWidth*2/3;
}
//两次位置之间的距离
function calcDistance(loc1,loc2 ){
return Math.sqrt( (loc1.x - loc2.x)*(loc1.x - loc2.x) + (loc1.y - loc2.y)*(loc1.y - loc2.y) )
}
//屏幕坐标与Canvas坐标的转换
function windowToCanvas( x , y ){
var bbox = canvas.getBoundingClientRect();
return {x:Math.round(x-bbox.left) , y:Math.round(y-bbox.top)}
}
function drawGrid(){
context.save();
context.strokeStyle = "rgb(230,11,9)";
context.beginPath();
context.moveTo( 3 , 3 )
context.lineTo( canvasWidth - 3 , 3 );
context.lineTo( canvasWidth - 3 , canvasHeight - 3 );
context.lineTo( 3 , canvasHeight - 3 );
context.closePath();
context.lineWidth = 6;
context.stroke();
context.beginPath();
context.moveTo(0,0);
context.lineTo(canvasWidth,canvasHeight);
context.moveTo(canvasWidth,0);
context.lineTo(0,canvasHeight);
context.moveTo(canvasWidth/2,0);
context.lineTo(canvasWidth/2,canvasHeight);
context.moveTo(0,canvasHeight/2);
context.lineTo(canvasWidth,canvasHeight/2);
context.lineWidth = 1;
context.stroke();
context.restore()
}






分享给朋友:
您可能感兴趣的文章:
随机阅读: