html5 canvas 教程
2017-12-14 本文已影响8人
wyrover
画线
image.png
<html>
<head>
<script>
window.onload = function(){
// get the canvas DOM element by its ID
var canvas = document.getElementById("myCanvas");
// declare a 2-d context using the getContext() method of the
// canvas object
var context = canvas.getContext("2d");
// set the line width to 10 pixels
context.lineWidth = 10;
// set the line color to blue
context.strokeStyle = "blue";
// position the drawing cursor
context.moveTo(50, canvas.height - 50);
// draw the line
context.lineTo(canvas.width - 50, 50);
// make the line visibile with the stroke color
context.stroke();
};
</script>
</head>
<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>
</html>
