JS+HTML5 Canvas实现简单的写字板功能示例
程序员文章站
2022-06-11 11:05:14
本文实例讲述了js+html5 canvas实现简单的写字板功能。分享给大家供大家参考，具体如下：
先来看运行效果：
具体代码如下：
本文实例讲述了js+html5 canvas实现简单的写字板功能。分享给大家供大家参考，具体如下：
先来看运行效果：
具体代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.jb51.net js写字板</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
body,html {
padding: 0;
margin: 0;
}
a,div,span {
font-family: "arial","microsoft yahei","黑体","宋体",sans-serif;
}
.canvas-box {
display: block;
margin: 40px auto;
background: #f5f5f5;
}
.color-box {
width: 1080px;
display: block;
margin: 20px auto;
text-align: center;
}
.color-item {
display: inline-block;
vertical-align: middle;
width: 48px;
height: 24px;
margin: 10px;
background: #989898;
cursor: pointer;
}
.red {
background: #e01d5b;
}
.blue {
background: #1d6ae0;
}
.green {
background: #1de087;
}
.yellow {
background: #f3e41d;
}
.orange {
background: #f9850b;
}
.black {
background: #333;
}
.color-item.active {
border: solid 3px #565656;
}
.btn {
display: block;
width: 120px;
height: 40px;
line-height: 40px;
margin: 10px auto;
text-align: center;
font-size: 18px;
border: solid 1px #999;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<canvas class="canvas-box" id="canvas"></canvas>
<div class="color-box">
<span class="color-item red"></span>
<span class="color-item blue"></span>
<span class="color-item green"></span>
<span class="color-item yellow"></span>
<span class="color-item orange"></span>
<span class="color-item black active"></span>
</div>
<div class="btn" onclick="cleardraw()">清除</div>
<script type="text/javascript">
var canvas = document.getelementbyid('canvas');
var context = canvas.getcontext("2d");
var isdraw = false; //定义变量控制画笔是否可用
var movepos; //定义变量存放初始画笔开始位置
var linwidth = 10;
var lincolor = '#333';
window.onload = function(){
draw();
}
function draw(){
canvas.width = 500;
canvas.height = 500;
context.strokestyle = "red";
context.linewidth = 10;
context.beginpath();
context.strokerect(0,0,500,500);
//设置画笔颜色，宽度
context.strokestyle = "red";
context.linewidth = 1;
//使线段连续，圆滑
context.linecap = "round";
context.linejoin = "round";
drawdashedline(context,0,0,500,500);
drawdashedline(context,0,500,500,0);
drawline(context,0,250,500,250);
drawline(context,250,0,250,500);
}
//画虚线（参照网上大神）
function drawdashedline(context, x1, y1, x2, y2, dashlength) {
dashlength = dashlength === undefined ? 5 : dashlength;
var deltax = x2 - x1;
var deltay = y2 - y1;
var numdashes = math.floor(
math.sqrt(deltax * deltax + deltay * deltay) / dashlength);
for (var i=0; i < numdashes; ++i) {
context[ i % 2 === 0 ? 'moveto' : 'lineto' ] (x1 + (deltax / numdashes) * i, y1 + (deltay / numdashes) * i);
}
context.stroke();
};
//画直线
function drawline(context,x1,y1,x2,y2){
context.moveto(x1,y1);
context.lineto(x2,y2);
context.stroke();
};
//获取鼠标相对与canvas位置
function getpos(x,y){
var box = canvas.getboundingclientrect();
return {x: x-box.left,y: y-box.top};
};
//画笔
function drawing(e){
if(isdraw){
var position = getpos(e.clientx,e.clienty);
context.strokestyle = lincolor;
context.linewidth = linwidth;
context.save();
context.beginpath();
context.moveto(movepos.x,movepos.y);
context.lineto(position.x,position.y);
context.stroke();
movepos = position;
context.restore();
}
}
//鼠标点下
canvas.onmousedown = function(e){
isdraw = true;
movepos = getpos(e.clientx,e.clienty);
drawing(e);
}
//鼠标移动
canvas.onmousemove = function(e){
drawing(e);
}
//鼠标松开
canvas.onmouseup = function(e){
isdraw = false;
}
//鼠标离开
canvas.onmouseout =function(e){
isdraw = false;
}
//选择画笔颜色
$('.color-item').on('click',function(){
$(this).addclass('active').siblings().removeclass('active');
lincolor = $(this).css('background-color');
});
//清除
function cleardraw(){
context.clearrect(0,0,500,500);
draw();
}
</script>
</body>
</html>
感兴趣的朋友还可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码，亲身体验一下运行效果。
更多关于javascript相关内容还可查看本站专题：《javascript+html5特效与技巧汇总》、《javascript图形绘制技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。
上一篇： 探讨Ajax中同步与异步之间的区别