<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="background: rgba(199,237,204,1)">
<div style="display:flex; flex-direction: row">
<!--通过style方式为canvas设置宽高在火狐浏览器上导致绘制内容纵向拉伸。。。-->
<canvas id="drawing" width="400px" height="400px">canvas to draw</canvas>
<pre id="container" style="margin: 10px"/>
</div>
</body>
<script type="text/javascript">
var drawing = document.getElementById('drawing');
if (drawing.getContext) {
print('support')
var context = drawing.getContext('2d');
context.fillStyle = '#fff';
context.fillRect(0, 0, 400, 400);
context.fillStyle = 'black'
for (let i in [0, 1, 2, 3, 4, 5, 6, 7]) {
context.fillText(i * 50, i * 50, 10)
context.fillText(i * 50, 0, i * 50)
}
context.font = 'bold 15px Arial';
context.textAlign = 'left';
context.textBaseline = 'bottom'
draw(context);
} else {
print('not ')
}
function draw(context) {
context.fillStyle = 'red';
context.fillRect(10, 10, 150, 150);
context.fillStyle = 'rgba(0,255,0,0.5)';
context.fillRect(100, 100, 150, 150);
context.lineWidth = 0.5;
context.strokeStyle = 'blue';
context.strokeRect(50, 50, 150, 150);
context.fillStyle = 'black'
context.fillText('hello canvas', 200, 400)
context.clearRect(125, 125, 25, 25)
context.clearRect(20, 20, 25, 25)
// context.lineCap
//context.lineJoin
context.strokeStyle = '#0f08'
context.moveTo(50, 50);
context.lineTo(100, 100);
context.lineTo(50, 100);
context.closePath();
context.stroke();
context.fillStyle = '#e1e1e188'
context.rect(200, 200, 150, 150)
context.fill();
drawClock(context);
context.fillText('hello', 0, 15)
drawLine(context);
// toImage();
}
function drawLine(context) {
context.save();
context.lineCap = 'round'
context.lineJoin = 'bevel' //miter round
context.strokeStyle = '#00f'
// context.lineWidth=3
context.translate(300, 300)
context.moveTo(0, 0);
context.lineTo(80, 80);
context.stroke()
context.moveTo(80, 0);
context.lineTo(0, 80)
context.stroke()
context.restore();
}
function drawClock(context) {
context.save();
context.strokeStyle = 'black';
// context.lineJoin='miter'
context.lineWidth = 3
context.lineCap = 'round' //round square butt
context.beginPath();
context.arc(100, 100, 99, 0, 2 * Math.PI, false);
context.arc(100, 100, 94, 0, 2 * Math.PI, false);
context.moveTo(100, 100);
context.lineTo(100, 15);
context.moveTo(100, 100);
context.lineTo(35, 100);
context.stroke();
context.fillStyle = '#000'
context.translate(100, 100);
for (i of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]) {
context.rotate(Math.PI / 6);
context.fillText(i + "", 0, -80)
}
context.restore();
}
function toImage() {
var imageUri = drawing.toDataURL('image/png');
var imageTag = document.createElement('img');
imageTag.style = 'margin:10px;width:200px;height:200px'
imageTag.src = imageUri;
document.body.appendChild(imageTag)
}
function print(txt) {
document.getElementById("container").innerHTML += ('\n') + txt;
}
document.body.onclick = function () {
window.location.reload()
}
console.log = print;
</script>
</html>
