当前位置：网站首页>Chapter 1 overview of canvas

Chapter 1 overview of canvas

2022-06-24 07:58:00 【yxqq378287007】

《canvas》 The first 1 Chapter canvas summary

The first 1 Chapter canvas summary

1.1 canvas What is it?

1.1.1 canvas brief introduction

canvas（ canvas ）,html5 in ,canvas Element combination JavaScript Draw all kinds of figures .

  • Drawing graphics ( rectangular 、 curve 、 Circle, etc. )
  • Charting
  • Animation effect
  • Game development

1.1.2 canvas And SVG

  • canvas Use JavaScript Dynamic generation ,SVG Use XML Static description .
  • canvas Based on bitmaps , Suitable for pixel and dynamic rendering , Amplification will distort ;SVG Based on vector , Applicable static description , Amplification doesn't distort .
  • Changes have taken place ,canvas Need to redraw ,SVG Unwanted .
  • Similar to the relationship between art and geometry .

1.2 canvas Elements

htaml5 Use in canvas Element drawing three steps ：

  1. obtain canvas object .
  2. Get context object context.
  3. Start drawing graphics .
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript"> window.onload = function () {
       //1、 obtain canvas object  var cnv = document.getElementById("canvas"); //2、 Get context object context var cxt = cnv.getContext("2d"); //3、 Start drawing graphics  cxt.moveTo(50, 100); cxt.lineTo(150, 50); cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

1.2.1 canvas Introduction to elements

Inline block element （inline-block）, Generally, you need to specify 3 Attributes ,id、width（ Default 300px） and height（ Default 150px）.
In development ,width and height belong HTML Property definition , Not in CSS The style defines .

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <style type="text/css"> canvas {
       width: 200px; height: 150px; } </style>
    <script type="text/javascript"> window.onload = function () {
       var cnv = document.getElementById("canvas"); var str = "canvas The width is ：" + cnv.width + ", The height is ：" + cnv.height; alert(str); // Can't get CSS in width and height, Use the default value 300,150. } </script>
</head>
<body>
    <canvas id="canvas" style="border:1px dashed gray;"></canvas>
</body>
</html>

1.2.2 canvas object

  • Common properties
    width、height
  • Common methods
    getContext(“2d”), obtain Canvas 2D Context object （context object ）
    toDataURL(), obtain canvas Object to generate a string of bitmaps 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript"> window.onload = function () {
       var cnv = document.getElementById("canvas"); var str = "Canvas The width is ：" + cnv.width + ", The height is ：" + cnv.height; alert(str); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="160" style="border:1px dashed gray"></canvas>
</body>
</html>

To reassure

  • html5 canvas For the time being, only 2D mapping API,3D Drawing use html5 in WebGL Realization .
  • IE9 And above support html5 canvas,IE7 And IE8 Compatibility through explorercanvas Extended solution , There will be many functional limitations , None unavailable fillText() Such method .
<!--[if IE]> <script src="https://github.com/arv/explorercanvas/excanvas.js"></script> <![end if]-->
  • recommend canvas course .
    W3C Official website ：www.w3.org/TR/2dcontext/
原网站

版权声明
本文为[yxqq378287007]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/175/202206240237028234.html

边栏推荐

猜你喜欢

随机推荐