Home > Article > Web Front-end > Xiaoqiang’s HTML5 mobile development road (6) - Canvas graphics drawing basics

Xiaoqiang’s HTML5 mobile development road (6) - Canvas graphics drawing basics

黄舟Original: 2017-01-22 10:51:191438browse

As mentioned earlier, Canvas is an important feature in HTML5. The canvas function is very powerful. The effects that can be achieved with photoshop can also be achieved with canvas. Below we use canvas to draw basic graphics.

1. Use of Canvas tag

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <canvas id="1" width="200" height="200" style="border:1px solid red"></canvas>  
    </body>  
</html>

Xiaoqiang’s HTML5 mobile development road (6) - Canvas graphics drawing basics

You can see that Canvas is like a canvas, and we can draw the graphics we need on this canvas. The canvas element itself has no drawing capabilities. All drawing work must be done inside JavaScript.

2. Draw a rectangle

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
    </head>  
    <body>  
        <canvas id="1" width="500" height="500" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
    </body>  
    <script type="text/javascript">  
        var c=document.getElementById(&#39;1&#39;);  
        var p=c.getContext("2d");  
    <span style="white-space:pre">  </span>//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。  
        p.fillStyle="#FF0000";  
        p.fillRect(0, 0, 300, 300);  
        p.fillStyle="rgba(0,0,255,0.5)";  
        p.fillRect(200,200,500,500);  
    </script>  
</html>

Xiaoqiang’s HTML5 mobile development road (6) - Canvas graphics drawing basics

3. Draw a line

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8">  
 </head>  
 <body>  
    <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
 </body>  
 <script type="text/javascript">  
    var c=document.getElementById(&#39;1&#39;);  
    var p=c.getContext("2d");  
  
    p.moveTo(10,10);  
    p.lineTo(150,50);  
    p.lineTo(10,50);  
    p.stroke();  
 </script>  
</html>

Xiaoqiang’s HTML5 mobile development road (6) - Canvas graphics drawing basics

4. Draw a circle Shape

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8">  
 </head>  
 <body>  
  <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
 </body>  
  <script type="text/javascript">  
    var c=document.getElementById(&#39;1&#39;);  
    var p=c.getContext("2d");  
  
    p.fillStyle="#FF0000";  
    p.beginPath();  
    p.arc(80,80,15,0,Math.PI*2,true);  
    p.closePath();  
    p.fill();  
 </script>  
</html>

Xiaoqiang’s HTML5 mobile development road (6) - Canvas graphics drawing basics

5. Gradient

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8">  
 </head>  
 <body>  
  <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
 </body>  
  <script type="text/javascript">  
    var c=document.getElementById("1");  
    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>  
</html>

Xiaoqiang’s HTML5 mobile development road (6) - Canvas graphics drawing basics

6. Drawing pictures

<!DOCTYPE HTML>  
<html>  
<body>  
  
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">  
Your browser does not support the canvas element.  
</canvas>  
  
<script type="text/javascript">  
  
var c=document.getElementById("myCanvas");  
var cxt=c.getContext("2d");  
var img=new Image()  
img.src="/i/eg_flower.png"  
cxt.drawImage(img,0,0);  
  
</script>  
  
</body>  
</html>

Xiaoqiang’s HTML5 mobile development road (6) - Canvas graphics drawing basics

7. Polygon

<!DOCTYPE html>  
<html>  
 <head>  
  <meta charset="utf-8">  
 </head>  
 <body>  
  <canvas id="1" width="200" height="200" style="border:1px solid red" onmousemove="mousexy(envent)"></canvas>  
 </body>  
  <script type="text/javascript">  
    var c=document.getElementById(&#39;1&#39;);  
    var p=c.getContext("2d");  
  
    p.fillStyle="#FF0000";  
    p.moveTo(10,10);  
    p.lineTo(150,50);  
    p.lineTo(10,50);  
    p.lineTo(20,30);  
    p.fill();  
 </script>  
</html>

Xiaoqiang’s HTML5 mobile development road (6) - Canvas graphics drawing basics

The above is the content of Xiaoqiang’s HTML5 mobile development road (6) - the basics of Canvas graphics drawing, and more related content Please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Xiaoqiang’s road to HTML5 mobile development (5) – making a beautiful video playerNext article：Xiaoqiang’s road to HTML5 mobile development (5) – making a beautiful video player

Related articles

See more