一个有趣的cnavas图形库:
https://roughjs.com/
安装
根据官网:
npm install --save roughjs
安装成功
然后...........不会用了
-
换个方法
-
在github上找到了对应的js文件
image.png
- 下载到本地
-
导入到自己代码里
image.png
- 就可以用了
image.png
附代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rough canvas</title>
<script src="rough.min.js"></script>
<style>
#myRoughCanvas{
margin: 0 auto;
border: 1px solid grey;
}
</style>
<script>
function showMouse(event){
document.getElementById("x").innerHTML = event.offsetX;
document.getElementById("y").innerHTML = event.offsetY;
}
</script>
</head>
<body>
<div>
<canvas id="myRoughCanvas" onmousemove="showMouse(event)" height="500px" width="500px"></canvas>
</div>
<script>
const ct = rough.canvas(document.getElementById("myRoughCanvas"));
ct.rectangle(100,150,300,200,{
fill : "grey",
fillweight : 0,
roughness : 3
});
ct.ellipse(175,210,40,30,{
fill : "red",
fillweight : 5
});
ct.ellipse(325,210,40,30,{
fill : "red",
fillweight : 5
});
//绘制三角形
ct.path('M250 300,L225 225,L280 225,Z',{
fill: 'red',
fillweight: 3
});
ct.path('M200 150,L150 50');
ct.path('M300 150,L350 50');
</script>
<p>x:<span id="x">0</span>y:<span id="y">0</span></p>
</body>
</html>
网友评论