<!doctype html>
<html>
<head>
<style>
body {
background: white;
}
#myCanvas {
background: white;
height: 100%;
width: 100%;
border: 3px dotted gray;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.js"></script>
<script type="text/javascript" canvas="myCanvas">
paper.install(window);
// Keep global references to both tools, so the HTML
// links below can access them.
var tool1, tool2, reset;
window.onload = function() {
paper.setup('myCanvas');
// Create two drawing tools.
// tool1 will draw straight lines,
// tool2 will draw clouds.
// Both share the mouseDown event:
var path;
function onMouseDown(event) {
path = new Path();
path.strokeColor = 'Purple';
path.strokeWidth = 3;
path.add(event.point);
}
tool1 = new Tool();
tool1.onMouseDown = onMouseDown;
tool1.onMouseDrag = function(event) {
path.add(event.point);
}
tool2 = new Tool();
tool2.minDistance = 20;
tool2.onMouseDown = onMouseDown;
tool2.onMouseDrag = function(event) {
// Use the arcTo command to draw cloudy lines
path.arcTo(event.point);
}
reset =new Tool();
reset.activate=function(event){
paper.project.activeLayer.removeChildren();
paper.view.draw();
}
}
paper.view.draw();
</script>
</head>
<body>
<p>To draw, drag in the space below. Choose tool:
<a href="#" onclick="tool1.activate();">Lines</a> |
<a href="#" onclick="tool2.activate();">Clouds</a>, or
<a href="#" onclick="reset.activate();">Clear</a></p>
<canvas id="myCanvas" resize></canvas>
</body>
</html>
To draw, drag in the space below. Choose tool: Lines | Clouds, or Clear
반응형
'svg' 카테고리의 다른 글
| svg paper.js : star (1) | 2024.02.08 |
|---|---|
| svg paper.js fill ,stroke : inherit value trouble, workaround (0) | 2024.02.06 |
| svg paper.js :MouseEvent, KeyEvent (0) | 2024.02.04 |
| svg paper.js : onMouseUp event (0) | 2024.02.03 |
| svg paper.js : tweenTo() (1) | 2024.02.02 |
