html 帆布
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 帆布相关的知识，希望对你有一定的参考价值。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
<div>
<button type="button" onclick="colorCange(0)">ペン</button>
<button type="button" onclick="colorCange(1)" >消しゴム</button>
</div>
<h2>画像出力<h2>
<div id="img-box"><img id="newImg"></div>
<div id="btn-box">
<button type="button" onclick="chgImg()" value="1">保存</button>
</div>
<script type="text/javascript">
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
moveflg = 0,
Xpoint,
Ypoint;
//初期値（サイズ、色）の決定
var defSize = 4,
defColor = "#000000";
var element = document.getElementById( "canvas" );
var rect = element.getBoundingClientRect();
var positionX = rect.left + window.pageXOffset;
var positionY = rect.top + window.pageYOffset;
// PC対応
canvas.addEventListener('mousedown', startPoint, false);
canvas.addEventListener('mousemove', movePoint, false);
canvas.addEventListener('mouseup', endPoint, false);
// スマホ対応
canvas.addEventListener('touchstart', startPoint, false);
canvas.addEventListener('touchmove', movePoint, false);
canvas.addEventListener('touchend', endPoint, false);
function startPoint(e){
e.preventDefault();
ctx.beginPath();
// 矢印の先っぽから始まるように調整
Xpoint = e.pageX-positionX;
Ypoint = e.pageY-positionY;
ctx.moveTo(Xpoint, Ypoint);
}
function movePoint(e){
if(e.buttons === 1 || e.witch === 1 || e.type == 'touchmove'){
Xpoint = e.pageX-positionX;
Ypoint = e.pageY-positionY;
moveflg = 1;
ctx.lineTo(Xpoint, Ypoint);
ctx.lineCap = "round";
ctx.lineWidth = defSize * 2;
ctx.strokeStyle = defColor;
ctx.stroke();
}
}
function endPoint(e){
if(moveflg === 0){
ctx.lineTo(Xpoint-1, Ypoint-1);
ctx.lineCap = "round";
ctx.lineWidth = defSize * 2;
ctx.strokeStyle = defColor;
ctx.stroke();
}
moveflg = 0;
}
function chgImg(){
var png = canvas.toDataURL();
document.getElementById("newImg").src = png;
}
function colorCange(colortype){
if(colortype===0){
defColor = "#000000";
} else {
defColor = "#fff";
}
}
</script>
<style type="text/css">
canvas {
border:2px solid #000;
}
</style>
</body>
</html>以上是关于html 帆布的主要内容，如果未能解决你的问题，请参考以下文章