canvas写字板

Html

Css


清空画布

body {
	margin:0;
	padding:0;
	background-color:#eee;
}
canvas {
	margin:50px auto 0;
	display:block;
}
#clear {
	display:block;
	width:80px;
	height:40px;
	line-height:40px;
	text-align:center;
	border:1px solid #eee;
	background-color:#fff;
	border-radius:5px;
	margin:20px auto;
	cursor:pointer;
}

var model = document.getElementById("model");
var ctx = model.getContext("2d");
// 绘制画布背景
drawLine(ctx);

function drawLine(ctx) {
    ctx.beginPath();
    // 规定线的颜色
    ctx.strokeStyle = "red";
    // 规定边框线的宽度
    ctx.lineWidth = 6;
    // 外边框线的轨迹
    ctx.moveTo(0, 0);
    ctx.lineTo(0, 600);
    ctx.lineTo(600, 600);
    ctx.lineTo(600, 0);
    ctx.lineTo(0, 0);
    ctx.stroke();
    // 画布上竖线
    ctx.lineWidth = 3;
    ctx.moveTo(300, 0);
    ctx.lineTo(300, 600);
    ctx.stroke();
    // 画布上横线
    ctx.moveTo(0, 300);
    ctx.lineTo(600, 300);
    ctx.stroke();
    // 画布上斜线
    ctx.moveTo(0, 0);
    ctx.lineTo(600, 600);
    ctx.stroke();
    // 画布上斜线
    ctx.moveTo(0, 600);
    ctx.lineTo(600, 0);
    ctx.stroke();
    ctx.closePath();
}
write(ctx);
var flag = false;
var pointX;
var pointY;

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas写字板



代码描述：利用canvas制作的写字板，有清空画布的功能

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

yuebanzhou

相关代码

canvas写字板

最新