Html 5開発-canvasを使用して直線効果を描画
52393 ワード
経路描画-直線|lineWidth,beginPath()、stroke()、moveTo()、lineTo()、lineCap,lineJoin,miterLimit,closePath()canvas/shape/path/line.html
DOCTYPE HTML>
<html>
<head>
<title> canvas demotitle>
head>
<body>
<canvas id="canvas" width="340" height="300" style="background-color: rgb(222, 222, 222)">
canvas
canvas>
<br/>
<button type="button" onclick="drawIt();"> button>
<button type="button" onclick="clearIt();"> button>
<script type="text/javascript">
var ctx = document.getElementById('canvas').getContext('2d');
function drawIt() {
clearIt();
ctx.strokeStyle = 'Green';
/*
* context.lineWidth - ， 1.0
*/
ctx.lineWidth = 10;
/*
* context.beginPath() -
* context.stroke() -
* context.moveTo(x, y) - ，
* context.lineTo(x, y) -
*/
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();
/*
* context.lineCap -
* round -
* square -
* butt - ，
*/
ctx.beginPath();
ctx.lineCap = "round";
ctx.moveTo(20, 40);
ctx.lineTo(200, 40);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "square";
ctx.moveTo(20, 60);
ctx.lineTo(200, 60);
ctx.stroke();
ctx.beginPath();
ctx.lineCap = "butt";
ctx.moveTo(20, 80);
ctx.lineTo(200, 80);
ctx.stroke();
ctx.lineWidth = 20;
/*
* context.lineJoin -
* bevel -
* round -
* miter - ，
*/
ctx.beginPath();
ctx.lineJoin = "bevel";
ctx.moveTo(20, 120);
ctx.lineTo(60, 120);
ctx.lineTo(20, 160);
ctx.stroke();
ctx.beginPath();
ctx.lineJoin = "round";
ctx.moveTo(100, 120);
ctx.lineTo(140, 120);
ctx.lineTo(100, 160);
ctx.stroke();
ctx.beginPath();
ctx.lineJoin = "miter";
ctx.moveTo(180, 120);
ctx.lineTo(220, 120);
ctx.lineTo(180, 160);
ctx.stroke();
/*
* context.miterLimit - lineJoin miter ， ， 10
*/
ctx.miterLimit = 2;
ctx.beginPath();
ctx.lineJoin = "miter";
ctx.moveTo(260, 120);
ctx.lineTo(300, 120);
ctx.lineTo(260, 160);
ctx.stroke();
ctx.lineWidth = 2;
/*
* context.closePath() -
*/
ctx.beginPath();
ctx.moveTo(20, 180);
ctx.lineTo(180, 180);
ctx.lineTo(180, 280);
ctx.closePath(); //
ctx.stroke();
}
function clearIt() {
ctx.clearRect(0, 0, 340, 300);
ctx.fillStyle = "Black";
ctx.strokeStyle = "Black";
ctx.lineWidth = 1;
}
script>
body>
html>