canvas Element is used to draw graphics on a web page .

What is? Canvas?

HTML5 Of canvas Element usage JavaScript Drawing images on Web pages .

The canvas is a rectangular area , You can control every pixel .

canvas There are multiple draw paths 、 rectangular 、 circular 、 Characters and methods to add images .

establish Canvas Elements

towards HTML5 Page add canvas Elements .

Of a specified element id、 Width and height :

<canvas id="myCanvas" width="200" height="100"></canvas>

adopt JavaScript To draw

canvas The element itself has no drawing ability . All drawing work must be done in JavaScript Internal finish :

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript Use id To find canvas Elements :

var c=document.getElementById("myCanvas");

then , establish context object :

var cxt=c.getContext("2d"); 

getContext("2d") The object is built in HTML5 object , There are multiple draw paths 、 rectangular 、 circular 、 Characters and methods to add images .

The following two lines of code draw a red rectangle :

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle How to dye it red ,fillRect The method defines the shape 、 Location and size .

Understanding coordinates

above fillRect Methods have parameters (0,0,150,75).

intend : Draw on the canvas 150x75 The rectangular , From the top left corner (0,0).

As shown in the figure below , On canvas X and Y Coordinates are used to position the painting on the canvas .

example : Hover over the rectangle to see the coordinates

more Canvas example

The next one is canvas More examples of painting on elements :

example - line

By specifying where to start , Where to end , To draw a line :

JavaScript Code :

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke(); </script>

canvas Elements :

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

Try it in person

example - circular

By specifying the size 、 Color and location , To draw a circle :

JavaScript Code :

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill(); </script>

canvas Elements :

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

Try it in person

example - The gradient

Use the color you specify to draw a gradient background :

JavaScript Code :

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50); </script>

canvas Elements :

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

Try it in person

example - Images

Put an image on the canvas :

JavaScript Code :

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0); </script>

canvas Elements :

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas> REF:http://www.w3school.com.cn/html5/html_5_canvas.asp

HTML5 Outsourcing team :HTML5 Canvas More articles on using the tutorial

  1. HTML5 Outsourcing team - Technology sharing 【 Use HTML5 Of VIDEO Mark play RTSP Video streaming 】

    Use HTML5 Of VIDEO Play RTSP Real time video stream source code : <!DOCTYPE html> <html><head> <meta http-equiv=&quo ...

  2. HTML5 Outsourcing team —— Technology sharing :HTML5 Examples of judging whether a device is online or offline and monitoring changes in network state

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  3. HTML5 Outsourcing team Update 2019 The latest case

    This project controls are dynamic loading ,3D Some use Unity3D, Others are based on ReactJS,NodeJS, Some use cocos2D, Because the project is classified , Only partial screenshots can be sent , Welcome to contact for more cases , Penguin 372900288 Wish you all ...

  4. [js Master's Road ] html5 canvas Series of tutorials - Master the common methods of drawing straight lines API

    Let's move on [js Master's Road ] html5 canvase Series of tutorials - know canvas And the basic usage continues . One . Drawing straight lines cxt.moveTo( x1, y1 ): Move the brush to x1, y1 This point ...

  5. [js Master's Road ] html5 canvas Series of tutorials - arcTo( Radians and quadratic , Cubic Bezier curves and online tools )

    Before , I wrote one arc Function usage :[js Master's Road ] html5 canvas Series of tutorials - arc Drawing curves ( curve , Arc , circular ). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  6. [js Master's Road ] html5 canvas Series of tutorials - arc Drawing curves ( curve , Arc , circular )

    draw a curve , The knowledge of path is often used , If you have questions about the path , Please refer to my article [js Master's Road ] html5 canvas Series of tutorials - Start path beginPath And close the path closePath Detailed explanation . arc: draw ...

  7. [js Master's Road ] html5 canvas Series of tutorials - Picture operation (drawImage,clip,createPattern)

    Then, above [js Master's Road ] html5 canvas Series of tutorials - Text style (strokeText,fillText,measureText,textAlign,textBaseline) continue , This paper introduces ...

  8. [js Master's Road ] html5 canvas Series of tutorials - Text style (strokeText,fillText,measureText,textAlign,textBaseline)

    And then the line styles [js Master's Road ] html5 canvas Series of tutorials - Line style (lineWidth,lineCap,lineJoin,setLineDash) continue . canvas Provides two ways to output text ...

  9. [js Master's Road ] html5 canvas Series of tutorials - Line style (lineWidth,lineCap,lineJoin,setLineDash)

    Above, , Finish writing radians and Bezier curves [js Master's Road ] html5 canvas Series of tutorials - arcTo( Radians and quadratic , Cubic Bezier curves and online tools ), This article is mainly about the style setting of lines lineWidth: Set the width of the line ...

Random recommendation

  1. CANopen Study —— Sync

    There must be coordination and synchronization between sending and receiving , So ,CANopen Introduce the concept of synchronization . Synchronous message : With or without a data byte CAN message . The data byte contains a from 1 The synchronous counter that starts to count up . The overflow value can be found in the parameter ( Indexes 1 ...

  2. 3 Kind of web The way of conversation management

    from :http://www.yidianzixun.com/n/0F1GYAsQ?s=8&appid=xiaomi&ver=3.7.8&utk=4lxc4q7c&fro ...

  3. DNS( One ) brief introduction

    Recently, I've learned something about DNS knowledge , By the way, let's summarize the relevant contents . 1. What is? DNS DNS(Domain Name System) service , You can use domain names instead of complex IP Address to access the web server , Make access to network services easier , And it can ...

  4. Fragment One of : The basic principle

    1. Low version API Yes Fragment Support for Fragment Must be loaded into Acitivity in , To present . However, it is lower than 3.0 Version of API in , Because there is no Fragment, So you have to use support package : (1) Yes ...

  5. T-SQL Business

    Business When booking train tickets , Next order , In this order , Contains multiple purchase information , Or all , Or none at all , Cooperative transaction is a mechanism to deal with this model . -- keyword :transaction or tran Abbreviation form -- open ...

  6. First time to know Iaas,paas

    Iaas(Infrastructure-as-a-service), Infrastructure as a service . Paas(Platform as a service), Platform as a service . Forget these two words for a moment , ...

  7. mac Top production ubuntu Boot disk

    https://help.ubuntu.com/community/How%20to%20install%20Ubuntu%20on%20MacBook%20using%20USB%20Stick h ...

  8. jsp page ,jstl The data in the tag is in &lt;%%&gt;java Use in

    May refer to jsp Of API Implicit objects .. This part of the data is actually stored in page domain , but jsp If you use java The code needs to be in a specific tag <%%>, The only thing that can be used in this tag is pageContext object , So you can ...

  9. Tomcat Source code analysis —— Start and stop services

    Preface be familiar with Tomcat The engineers of , I'm sure you all know Tomcat How to start and stop . about startup.sh.startup.bat.shutdown.sh.shutdown.bat Wait for scripts or batch commands , everyone ...

  10. Odoo 8.0 new API And model decorate

    model The decorator returns a list of sets Application, for example, : Definition columns langs = fields.Selection(string="Lang",selection=&quo ...