<!doctype html>
<html>
<head>
<style>
canvas {width:100%;
height:10)%;
border:1px solid black;}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.17/paper-full.js"></script>
<script type="text/paperscript" canvas="myCanvas">
var path;
function onMouseDown(event){
path=new Path();
path.strokeColor="blue";
path.add(event.point);
var path2=new Path.Circle(event.point,10);
path2.strokeColor="red";
if(Key.isDown('a')){
path2.strokeColor="purple";
}else{
path2.fillColor="maroon";
}
}
function onMouseUp(event){
path.add(event.point);
path.add(event.middlePoint+[100,0]);
path.closed=true;
}
</script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<svg id="svg1"></svg>
</body>
</html>
반응형
'svg' 카테고리의 다른 글
| svg paper.js fill ,stroke : inherit value trouble, workaround (0) | 2024.02.06 |
|---|---|
| svg paper.js : tools (0) | 2024.02.04 |
| svg paper.js : onMouseUp event (0) | 2024.02.03 |
| svg paper.js : tweenTo() (1) | 2024.02.02 |
| svg paper.js ;tween (0) | 2024.02.02 |
