canvas實現簡單的畫筆功能
阿新 • • 發佈：2019-02-03
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>模仿筆畫</title>
<style type="text/css">
#_canvas{
background-color: rgb(240,240,240);
}
</style>
</head>
<body>
<canvas id="_canvas">sorry, your broswer does not support html5!</canvas>
<script type="text/javascript">
var canvas_ = document.getElementById("_canvas");
//全屏
canvas_.setAttribute("width",screen.width);
canvas_.setAttribute("height",screen.height);
var context = canvas_.getContext("2d");
context.strokeStyle = "red";
context.lineWidth = 4;
var array_paint = [];
var current_y = 0;
var current_x = 0;
//判斷滑鼠是否按下
var m_down = false;
function paint()
{
context.beginPath();
context.moveTo(array_paint[0][0],array_paint[0][1]);
if(array_paint.length == 1)
context.lineTo(array_paint[0][0] +1,array_paint[0][1] +1);
else
{
var i =1;
for(i in array_paint)
{
context.lineTo(array_paint[i][0],array_paint[i][1]);
context.moveTo(array_paint[i][0],array_paint[i][1]);
}
}
context.closePath();
context.stroke();
}
//按下滑鼠
canvas_.onmousedown = function(event)
{
m_down = true;
current_x = event.offsetX;
current_y = event.offsetY;
array_paint.push([current_x,current_y]);
paint();
}
//滑鼠鬆開,清空資料
canvas_.onmouseup = function(event)
{
m_down = false;
array_paint = [];
}
//滑鼠按下後拖動
canvas_.onmousemove = function(event)
{
if(m_down)
{
current_x = event.offsetX;
current_y = event.offsetY;
array_paint.push([current_x,current_y]);
paint();
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>模仿筆畫</title>
<style type="text/css">
#_canvas{
background-color: rgb(240,240,240);
}
</style>
</head>
<body>
<canvas id="_canvas">sorry, your broswer does not support html5!</canvas>
<script type="text/javascript">
var canvas_ = document.getElementById("_canvas");
//全屏
canvas_.setAttribute("width",screen.width);
canvas_.setAttribute("height",screen.height);
var context = canvas_.getContext("2d");
context.strokeStyle = "red";
context.lineWidth = 4;
var array_paint = [];
var current_y = 0;
var current_x = 0;
//判斷滑鼠是否按下
var m_down = false;
function paint()
{
context.beginPath();
context.moveTo(array_paint[0][0],array_paint[0][1]);
if(array_paint.length == 1)
context.lineTo(array_paint[0][0] +1,array_paint[0][1] +1);
else
{
var i =1;
for(i in array_paint)
{
context.lineTo(array_paint[i][0],array_paint[i][1]);
context.moveTo(array_paint[i][0],array_paint[i][1]);
}
}
context.closePath();
context.stroke();
}
//按下滑鼠
canvas_.onmousedown = function(event)
{
m_down = true;
current_x = event.offsetX;
current_y = event.offsetY;
array_paint.push([current_x,current_y]);
paint();
}
//滑鼠鬆開,清空資料
canvas_.onmouseup = function(event)
{
m_down = false;
array_paint = [];
}
//滑鼠按下後拖動
canvas_.onmousemove = function(event)
{
if(m_down)
{
current_x = event.offsetX;
current_y = event.offsetY;
array_paint.push([current_x,current_y]);
paint();
}
}
</script>
</body>
</html>