介绍 & lt; ! DOCTYPE HTML>
& lt; html>
& lt; head>,,
& lt; meta charset=皍tf-8",/在,,
& lt; title> JavaScript +帆布实现自定义画板& lt;/title>
& lt;/head>
& lt; body>
& lt; canvas id=癱anvas",,宽度=?00“,身高=?00“祝辞& lt;/canvas>
& lt; script 类型=拔谋?javascript"祝辞,,,
var 才能;canvas =, . getelementbyid (“canvas");,,,
var 才能;ctx =, canvas.getContext (“2 d");,,,//画才能一个黑色矩形,,,
ctx.fillStyle才能=癰lack",,,,
ctx.fillRect才能(0,0600300);,,,//才能按下标记,,,
var 才能;onoff =,假的,,,//才能变量oldx跟老人代表鼠标移动前的坐标,,
var 才能;oldx =, -10,,,,
var 才能;oldy =, -10,,,,//才能设置颜色,,
var 才能;linecolor =,“white",,,,//才能设置线宽,,,
var 才能;linw =, 4,,,,//才能添加鼠标移动事件,,,
canvas.addEventListener才能(“mousemove",画,真的),,,//第三个参数主要跟捕获或者冒泡有关,,,//才能添加鼠标按下事件,,,
canvas.addEventListener才能(“mousedown",下,假),,,,//才能添加鼠标弹起事件,,,
canvas.addEventListener才能(“mouseup",,假),,,,
function 才能下来(事件){,,,,
,,onoff =,真的,,,,,,
,,oldx =, event.pageX-10;,,,,,,
,,oldy =, event.pageY-10;,,
,,//console.log (event.pageX + & # 39; 000年.............. ............. & # 39;+ event.pageY);//event.pageX才能跟event.pageY相对于整个页面鼠标的位置,包括溢出的部分(就是滚动条),,,
,,},,,
function 才能;(){,,,,
,,onoff =,假的,,,,
,},
画(事件),function {,,,
如果才能(onoff ==, true) {,,,,,,,
,,var newx =, event.pageX-10;,,,,,,,,
,,var newy =, event.pageY-10;,,,,,,,,
,,ctx.beginPath ();//beginPath(),丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为,(0,0)只,,,,,,
,,ctx.moveTo (oldx,老人);,,,//移动到点击时候的坐标,以那个坐标为原点,,,,,,
,,ctx.lineTo (newx newy);,,,//绘制新的路径,,,,,,,
,,ctx.strokeStyle=linecolor;,,,,,,,
,,ctx.lineWidth=linw;,,,,,,,
,,ctx.lineCap=皉ound",,,,,,,,
,,ctx.stroke();//中风(),方法会实际地绘制出通过,移至(),和,画线(),方法定义的路径。默认颜色是黑色只,,,//将新的鼠标位置赋给下一次开始绘制的起始坐标,,,,,,
,,oldx =, newx;,,,,,,
,,oldy =, newy;,,,
,,};
,};
& lt;/script>
& lt;/body>
& lt;/html>
本篇文章为大家展示了怎么在JavaScript中使用帆布自定义画板,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
上述内容就是怎么在JavaScript中使用帆布自定义画板,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。
