怎么在HTML5中使用Canvas实现一个写字板功能
这期内容当中小编将会给大家带来有关怎么在HTML5中使用Canvas实现一个写字板功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。
网站设计制作过程拒绝使用模板建站；使用PHP+MYSQL原生开发可交付网站源代码;符合网站优化排名的后台管理系统；网站设计、成都网站制作收费合理；免费进行网站备案等企业网站建设一条龙服务.我们是一家持续稳定运营了十余年的创新互联网站建设公司。
具体代码如下：
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;
}
清除
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();
}
上述就是小编为大家分享的怎么在HTML5中使用Canvas实现一个写字板功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联行业资讯频道。
文章名称：怎么在HTML5中使用Canvas实现一个写字板功能
文章路径：http://kswsj.com/article/jhjgpj.html
在线咨询
在线咨询
