Introduction to how to use HTML5-canvas

New element

## The element is used for drawing graphics, which is done through scripts (usually JavaScript).## The

# tag is just a graphics container, you have to use a script to draw the graphics.

You can use Canva to draw paths, boxes, circles, characters and add images in a variety of ways.

Note:

By default, the element has no borders and content. 　

draw a square

<span style="color: #008000"><!--</span><span style="color: #008000">fillStyle是填充样式，如果不设置fillStyle属性，默认填充色为黑色，fillRect是画一个矩形，参数为X,Y,Width,Height</span><span style="color: #008000">--></span><span style="color: #0000ff"><span style="color: #ff00ff">DOCTYPE html</span><span style="color: #0000ff">></span><span style="color: #0000ff"><span style="color: #800000">html</span><span style="color: #0000ff">></span><span style="color: #0000ff"><span style="color: #800000">head</span><span style="color: #0000ff">></span><span style="color: #0000ff"><span style="color: #800000">meta </span><span style="color: #ff0000">charset</span><span style="color: #0000ff">="UTF-8"</span><span style="color: #ff0000"> name</span><span style="color: #0000ff">="author"</span><span style="color: #ff0000"> content</span><span style="color: #0000ff">="赵慧娟"</span><span style="color: #0000ff">></span><span style="color: #0000ff"><span style="color: #800000">title</span><span style="color: #0000ff">></span><span style="color: #800000">title</span><span style="color: #0000ff">></span><span style="color: #0000ff"><span style="color: #800000">script </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="Scripts/jquery-1.10.2.js?1.1.10"</span><span style="color: #0000ff">></span><span style="color: #800000">script</span><span style="color: #0000ff">></span><span style="color: #0000ff"><span style="color: #800000">script </span><span style="color: #ff0000">type</span><span style="color: #0000ff">="text/javascript"</span><span style="color: #0000ff">></span><span style="background-color: #f5f5f5; color: #000000">$(</span><span style="background-color: #f5f5f5; color: #0000ff">function</span><span style="background-color: #f5f5f5; color: #000000">(){</span><span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> canvas</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000">document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">myCanvas</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">)</span><span style="background-color: #f5f5f5; color: #0000ff">var</span><span style="background-color: #f5f5f5; color: #000000"> ctx</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000">canvas.getContext(</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">2d</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">);
                ctx.fillStyle</span><span style="background-color: #f5f5f5; color: #000000">=</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">deeppink</span><span style="background-color: #f5f5f5; color: #000000">"</span><span style="background-color: #f5f5f5; color: #000000">;
                ctx.fillRect(</span><span style="background-color: #f5f5f5; color: #000000">10</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #000000">10</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #000000">100</span><span style="background-color: #f5f5f5; color: #000000">,</span><span style="background-color: #f5f5f5; color: #000000">100</span><span style="background-color: #f5f5f5; color: #000000">);<br>　　　　　　　　 <span style="color: #339966"> //ctx.moveTo(0,0);　　　　//定义开始坐标</span><br><span style="color: #339966">　　　　　　　　　//ctx.lineTo(100,100);　　//定义结束坐标</span><br><span style="color: #339966">　　　　　　　　　//ctx.stroke();　　　　　　//绘制线条</span><br></span></span></span></span></span></span></span></span>

            })<canvas></canvas>

The above is the detailed content of Introduction to how to use HTML5-canvas. For more information, please follow other related articles on the PHP Chinese website!