首页 新闻 会员 周边 捐助

前端canvas或svg实现画板功能

0
[已解决问题] 解决于 2017-01-20 11:14

1.要求鼠标事件触发

2.动态画直线

3.画多条支线

予以暖杀风的主页 予以暖杀风 | 初学一级 | 园豆:116
提问于:2017-01-08 12:56
< >
分享
最佳答案
0

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
text-align: center;
}
svg {
background: #f0f0f0;
}
</style>
</head>
<body>
<h3>svg绘制折线</h3>
<svg width="400" height="400" id="s12">
<polyline id="p2" points="50,150 350,150 100,300 200,50" stroke="#f00" fill="yellow"></polyline>
</svg>

<script>
p2.onmouseover = function(){
this.setAttribute('stroke-width', 5);
}
p2.onmouseout = function(){
this.setAttribute('stroke-width', 1);
}
</script>
</body>
</html>

这个可能不能够满足你的要求啊,动态画直线,可是点都变了啊,这个怎么动态创建呢?你是想用ajax动态获取吗?

奖励园豆:5
jser_dimple | 初学一级 |园豆:45 | 2017-01-14 11:26
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册