HTML5 Canvas Finishing Notes drawing line

1. Draw the line

1.1 "Configure the canvas" before drawing (no longer mentioned later)

Example Introduction

First set a point of the canvas style has a property to make it have a border (good observation), centered (Display:block, the canvas must first be set to block-level elements, the margin is set to the central only valid)<canvas id="Canvas" style="border:1px solid gold;display:block; margin:50px auto; " ></Canvas>/** Painting in Script * *<script> //Get canvasvar can=document.getelementbyid ("Canvas"); //2d painting using con for drawing    var con=can.getcontext ("2d");    /*canvans's properties are best not written in CSS, * because width and height not only represent the size of the canvas * but also represent the accuracy, pixels (don't write units) of the canvas interior.   * /can.width=1024x768; can.height=768;           </script>

Tip: Fear of incompatible browsers

1.2 Start drawing lines

Convas is based on the state-drawn

Note:

MoveTo refers to the beginning of painting, MoveTo (100,100) =beginpath () +lineto (100,100),
Beginpath () Turns on the drawing state, Colsepath () is a closed state (the drawing curve is closed).

Why do I need Beginpath () and Colsepath ()?

Because Cavans canvas inside not only draw a thing, afraid line and line "fight".

Warm tips:

Fill and stroke will not cover half of the line edge, but the fill color is covered, the code is as follows:

1.3-Line Properties

LineCap

The head of the line, where the line is connected will not be effective

LineJoin

The form of line-to-line cohesion

Belevel Oblique Connection

Round fillet Connection

miter

Miterlimit

"miter"1010"round""bevel" 的时候，这个属性无效。

HTML5 Canvas Finishing Notes drawing line