• canvas 基础


    1.<canvas>元素

    <canvas id="tutorial" width="150" height="150"></canvas>

    替换内容

    <canvas>元素不同于在其中的<img>标签,就像<video><audio>,或者 <picture>元素一样,很容易定义一些替代内容。由于某些较老的浏览器(尤其是IE9之前的IE浏览器)或者文本浏览器不支持HTML元素"canvas",在这些浏览器上你应该总是能展示替代内容。

    <canvas id="stockGraph" width="150" height="150">
      current stock price: $3.15 +0.15
    </canvas>
    
    <canvas id="clock" width="150" height="150">
      <img src="images/clock.png" width="150" height="150" alt=""/>
    </canvas>

     </canvas> 标签不可省

    2.渲染上下文(The rendering context)

    WebGL 使用了基于OpenGL ES的3D上下文 ("experimental-webgl") 

    我们将会将注意力放在2D渲染上下文中

    canvas起初是空白的。为了展示,首先脚本需要找到渲染上下文,然后在它的上面绘制。<canvas> 元素有一个做 getContext() 的方法,这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数,上下文的格式。对于2D图像而言,如本教程,你可以使用 CanvasRenderingContext2D

    var canvas = document.getElementById('tutorial');
    var ctx = canvas.getContext('2d');

    3.检查支持性

    var canvas = document.getElementById('tutorial');
    
    if (canvas.getContext){
      var ctx = canvas.getContext('2d');
      // drawing code here
    } else {
      // canvas-unsupported code here
    }

    4.一个模板骨架

    <html>
      <head>
        <title>Canvas tutorial</title>
        <script type="text/javascript">
          function draw(){
            var canvas = document.getElementById('tutorial');
            if (canvas.getContext){
              var ctx = canvas.getContext('2d');
            }
          }
        </script>
        <style type="text/css">
          canvas { border: 1px solid black; }
        </style>
      </head>
      <body onload="draw();">
        <canvas id="tutorial" width="150" height="150"></canvas>
      </body>
    </html>

    5.一个简单例子

    <html>
     <head>
      <script type="application/javascript">
        function draw() {
          var canvas = document.getElementById("canvas");
          if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
    
            ctx.fillStyle = "rgb(200,0,0)";
            ctx.fillRect (10, 10, 55, 50);
    
            ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
            ctx.fillRect (30, 30, 55, 50);
          }
        }
      </script>
     </head>
     <body onload="draw();">
       <canvas id="canvas" width="150" height="150"></canvas>
     </body>
    </html>
  • 相关阅读:
    201521123028 《Java程序设计》第5周学习总结
    Markdown格式
    201521123028《Java程序设计》第4周学习总结
    201521123028 《Java程序设计》第3周学习总结
    Spring07 JDBC
    Spring06 Aop
    Mystring05 配置文件之间的关系
    Mybatais 13 二级缓存
    Mybatais 14 注释的配置
    Mybatais 12 一级缓存
  • 原文地址:https://www.cnblogs.com/vervin/p/6026416.html
Copyright © 2020-2023  润新知