JavaScript+Canvas实现自定义画板的示例代码
程序员文章站
2022-06-24 15:25:03
这篇文章主要介绍了JavaScript+Canvas实现自定义画板的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学... 19-05-13...
最近研究了html5一些新的元素属性，发现确实好用，特别是里面的canvas这个新的标签元素。官方介绍：canvas api（画布）是在html5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用javascript操作的位图（bitmap）。以下使用javascript结合canvas实现一个画板功能
效果演示图：
代码部分（直接复制便可使用）
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>javascript+canvas实现自定义画板</title>
</head>
<body>
<canvas id="canvas" width="600" height="300"></canvas>
<script type="text/javascript">
var canvas = document.getelementbyid("canvas");
var ctx = canvas.getcontext("2d");
//画一个黑色矩形
ctx.fillstyle="black";
ctx.fillrect(0,0,600,300);
//按下标记
var onoff = false;
//变量oldx跟oldy代表鼠标移动前的坐标
var oldx = -10;
var oldy = -10;
//设置颜色
var linecolor = "white";
//设置线宽
var linw = 4;
//添加鼠标移动事件
canvas.addeventlistener("mousemove",draw,true); //第三个参数主要跟捕获或者冒泡有关
//添加鼠标按下事件
canvas.addeventlistener("mousedown",down,false);
//添加鼠标弹起事件
canvas.addeventlistener("mouseup",up,false);
function down(event){
onoff = true;
oldx = event.pagex-10;
oldy = event.pagey-10;
//console.log(event.pagex+'..............000.............'+event.pagey);
//event.pagex跟event.pagey相对于整个页面鼠标的位置 包括溢出的部分（就是滚动条）
}
function up(){
onoff = false;
}
function draw(event){
if(onoff == true){
var newx = event.pagex-10;
var newy = event.pagey-10;
ctx.beginpath();//beginpath() 丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为 (0,0)。
ctx.moveto(oldx,oldy); //移动到点击时候的坐标，以那个坐标为原点
ctx.lineto(newx,newy); //绘制新的路径
ctx.strokestyle=linecolor;
ctx.linewidth=linw;
ctx.linecap="round";
ctx.stroke();//stroke() 方法会实际地绘制出通过 moveto() 和 lineto() 方法定义的路径。默认颜色是黑色。
//将新的鼠标位置赋给下一次开始绘制的起始坐标
oldx = newx;
oldy = newy;
};
};
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。