Home > Article > Web Front-end > Sample code sharing of basic features of html5 Canvas
canvas The basic attributes and methods: width, height, getContext(), etc.;
through width and heightTo get and set the width and height of the current canvas;
Get the drawing environment (context) of the current canvas through the getContext() method;
context=canvas.getContext("2d");
context contains all the methods and properties we need to draw on canvas;
In the Cartesian coordinate system of context, canvas's The upper left corner is the origin; from the origin to the right is the positive direction of the It is used in combination with
current
state; Before we truly understand how Canvas works, current state is a concept that must be mastered; current state is actually a stack of drawing states, which applies to the entire canvas globally;
We can operate the following states:
Transformation matrix Matrix)<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>s3</title> <script type="text/javascript" src="../script/modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoaded, false); var Debugger = function() { }; Debugger.log = function(message) { try { console.log(message); } catch (exception) { return; } } function eventWindowLoaded() { canvasApp(); } function canvasSupport() { return Modernizr.canvas; } function eventWindowLoaded() { canvasApp(); } function canvasApp() { if(!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); function drawScreen() { //以下代码来源于<http://www.cnblogs.com/nothingbrother/archive/2011/12/23/2299856.html> for(var x = 0.5; x < 550; x += 10) { context.moveTo(x, 0); context.lineTo(x, 400); } for(var y = 0.5; y < 400; y += 10) { context.moveTo(0, y); context.lineTo(550, y); } context.strokeStyle = "#cecece"; context.stroke(); context.beginPath(); context.moveTo(50, 150); context.lineTo(300, 150); context.moveTo(250, 100); context.lineTo(300, 150); context.moveTo(300, 50); context.lineTo(250, 100); context.moveTo(450, 200); context.lineTo(300, 50); /*symmetry*/ context.moveTo(50, 250); context.lineTo(300, 250); context.moveTo(250, 300); context.lineTo(300, 250); context.moveTo(300, 350); context.lineTo(250, 300); context.moveTo(450, 200); context.lineTo(300, 350); /*end*/ context.moveTo(50, 150); context.lineTo(50, 250); /*write coordinate*/ context.font = "bold 12px sans-serif"; context.fillText("( 0 , 0 )", 8, 5); context.fillText("(50, 150)", 58, 155); context.fillText("(300, 150)", 308, 155); context.fillText("(250, 100)", 258, 105); context.fillText("(300, 150)", 308, 155); context.fillText("(300, 50)", 308, 55); context.fillText("(50, 250)", 58, 255); context.fillText("(300, 250)", 308, 255); context.fillText("(250, 350)", 258, 355); context.fillText("(450, 200)", 458, 205); context.strokeStyle = "#f00"; context.stroke(); } drawScreen(); } </script> </head> <body> <div style="position: absolute; top: 50px; left: 50px;"> <canvas id="canvasOne" width="550" height="400"> Your browser does not support HTML5 Canvas. </canvas> </div> </body> </html>
Clipping region
Method:clip()
Methods:scale, rotate, transform, and translate
Let’s take a brief look at it first. We will slowly analyze the use of these attributes and methods in future articles; Written by foreign [oreilly] A small program (guess letters):
Properties: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, line Join, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, global CompositeOperation, font, textAlign, and textBaseline.
The above is the detailed content of Sample code sharing of basic features of html5 Canvas. For more information, please follow other related articles on the PHP Chinese website!