首頁 > 開發者 > JavaScript
標籤：
<!DOCTYPE html><html><head> <meta name="description" content="HTML5 Canvas Graphics and Animation Video 1" /> <meta charset="utf-8"> <title>HTML5 Canvas Graphics and Animation</title></head><body><canvas id="canvas" width="600" height="600"></canvas><script src="app.js"></script></body></html>
/** * Created by Answer1215 on 3/19/2015. */window.onload = function() { //var canvas = $("#canvas")[0]; //var canvas = document.getElmenetByTagName("canvas")[0]; var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"); canvas.width = 400; canvas.height = 700; //context.fillRect(10, 10, 100, 200);/**/ context.beginPath(); context.moveTo(100,100); //without draw any line; context.lineTo(300, 100); context.lineTo(300, 200); context.lineTo(100, 200); context.lineTo(100, 100); context.closePath(); context.stroke(); //context.fill(); //fill() will also close the path for you //so if you use fill(), you don‘t need closePath(); but in case you forgot //to close the path later, just remember to close it every times./**//**/ context.rect(100,100,100,300); //make a rect and stroke it context.stroke(); context.fillRect(100,100,100,300); //fill rect context.strokeRect(100,100,100,300); //draw rect context.clearRect(100,100,100,300); //clean the canvas*/};
[Javascript] Drawing Paths - Lines and Rectangles
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
