html图片山写字,canvas实现田字格写字效果

HtmlCssJs

此浏览器不支持canvas

清除

#canvas{display:block;margin:0 auto;}

/*清除器样式*/

#controller{margin: 0 auto;}

.op_btn{float: right;margin: 20px 0 0 0;border: 2px solid #aaa;

width: 80px;height: 40px;line-height: 40px;font-size: 20px;text-align: center;

border-radius: 5px;cursor: pointer;background-color: white;

font-weight: bold;font-family:Arial;}

.op_btn:hover{background: #def;}

.clearfix{clear: both;}

/*颜色按钮*/

.color_btn{

float: left;

margin: 16px 0 0 10px;

border: 5px solid white;

width: 40px;

height: 40px;

border-radius: 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;}

window.οnlοad=function(){

//定义画布常量宽高(如果屏幕的大小-20比650小的话则在移动端，反之在pc端)

var canvasWidth=Math.min(650,$(window).width()-20);

var canvasHeight=canvasWidth;

//默认鼠标按下为false

var isMouseDown=false;

//上一次鼠标记录的位置

var lastLoc={x:0,y:0};

//设置当前默认颜色

var strokeColor="black";

//获取画布

var canvas=document.getElementById('canvas');

//获取画布上下文

var context=canvas.getContext('2d');

//设置画布大小

canvas.width=canvasWidth;

canvas.height=canvasHeight;

//调用画布

drawGrid();

//动态设置 #controller宽度,让其适应手机屏幕

$(" #controller").css('width',canvasWidth+'px');

//清除画布操作

$('#clear_btn').click(function(){

//清除画布上的字体

context.clearRect(0,0,canvasWidth,canvasHeight);

//重新绘画

drawGrid();

});

//颜色更换

$('.color_btn').click(function(e){

//选中按钮时移除掉边框

$('.color_btn').removeClass('color_btn_selected');

//再在当前按钮添加边框

$(this).addClass('color_btn_selected');

//把当前选中的按钮颜色赋值给画笔

strokeColor=$(this).css('background-color');

});

//鼠标在画布按下时

canvas.οnmοusedοwn=function(e){

e.preventDefault();

isMouseDown=true;

//console.log("mouse Down!");

//e.clientX和e.clientY传入当前屏幕坐标

lastLoc=windowToCanvas(e.clientX,e.clientY);

//alert(loc.x+","+loc.y);

};

//鼠标在画布按下松开后

canvas.οnmοuseup=function(e){

e.preventDefault();

isMouseDown=false;

//console.log("mouse Up!");

};

//鼠标离开画布时

canvas.οnmοuseοut=function(e){

e.preventDefault();

isMouseDown=false;

//console.log("mouse out!");

};

//鼠标移动在画布上时

canvas.οnmοusemοve=function(e){

e.preventDefault();

if(isMouseDown){

//console.log("mouse move!");

var curLoc=windowToCanvas(e.clientX,e.clientY);

//draw

context.beginPath();

context.moveTo(lastLoc.x,lastLoc.y);

context.lineTo(curLoc.x,curLoc.y);

//设置画笔颜色

context.strokeStyle=strokeColor;

//设置画笔粗细

context.lineWidth=10;

//填补空白

context.lineCap="round";

//线条更加平滑

context.lineJoin="round";

//画线

context.stroke();

//当再画时，当前就是等于上一次开始的时候

lastLoc=curLoc;

}

};

//*屏幕坐标与canvas坐标的转换

function windowToCanvas(x,y){

//创建canvas所对应的包围盒

var bbox=canvas.getBoundingClientRect();

//返回屏幕x坐标减去bbox距离左边的间距就是canvas距离左边的位置,顶部同理左边

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(0,canvasHeight);

context.lineTo(canvasWidth,0);

context.moveTo(0,canvasHeight/2);

context.lineTo(canvasWidth,canvasHeight/2);

context.moveTo(canvasWidth/2,0);

context.lineTo(canvasWidth/2,canvasHeight);

context.lineWidth=1;

context.stroke();

context.restore();

}

}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：2.1.4