見つけることができるすべての明確なキャンバス コードを試しましたが、キャンバスをクリックして戻すと、古い図面が再び表示されます。クリアボタンを押したときに描画が新しい描画に戻らないようにする必要があります。それが役立つ場合、私はpaper.jsを使用しています
HTML
<canvas id="myCanvas" height="400px" width="400px;"></canvas>
JS (Clearcanvas はボタンからの機能です)
function clearcanvas(){
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,400,400);
}
描画機能のJSはpaper.jsで動作
<script type="text/paperscript" canvas="myCanvas">
tool.minDistance = 5;
var path;
function onMouseDown(event) {
path = new Path();
path.strokeColor = 'red';
path.strokeWidth= 3;
path.opacity="0.4";
path.add(event.point, event.point);
}
function onMouseDrag(event) {
path.add(event.point, event.point);
}
function onMouseDrag(event) {
if(event.modifiers.shift) {
path.lastSegment.point = event.point;
path.strokeColor = 'blue';
} else {
path.add(event.point);
}
}
</script>