canvas实现简单的画笔功能

最新推荐文章于 2025-03-30 09:43:42 发布

fanzhang1990

最新推荐文章于 2025-03-30 09:43:42 发布

阅读量1w

点赞数

分类专栏： h5—canvas简单动画效果

本文链接：https://blog.youkuaiyun.com/fanzhang1990/article/details/23611483

版权

h5—canvas简单动画效果专栏收录该内容

3 篇文章

订阅专栏

这篇博客展示了如何使用HTML5的canvas元素创建一个简单的画笔应用。通过监听鼠标事件，实现在画布上绘制线条，允许用户自定义颜色和线条宽度。当鼠标按下时开始记录坐标，移动时更新坐标并绘制，松开鼠标时清除当前路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>