Canvas基础知识(一)

2024年1月2日 202次阅读 来源: 青灯油纸

canvas是Html5新增的标签，是个图形容器。许可JavaScript在其区域内举行绘制。别的大小由width和height决议。

canvas的建立

<canvas id="canvas" width=800; height=600></canvas>;
canvas标签只要width和height两个属性，在没有设置它们的情况下，canvas默许大小为300X150。同时，假如用css来设置canvas的大小会出题目，引荐直接在canvas标签里设置大小或许经由过程JavaScript来设置大小。

canvas能做什么？

  • 动画
  • 图形
  • 游戏
  • 字体

取得上下文

canvas只要取得上下文以后，才能在它的上面绘画。getContext()要领就是来猎取上下文和绘画功用的。getContext()只要一个参数，就是上下文的花样。

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

清空画布的要领

1.重设canvas的高度或许宽度：
因为canvas每当高度或宽度被重设时，画布内容就会被清空，因而可以用以下要领清空

function clearCanvas(){
    var canvas = document.getElementById("canvas");
    canvas.height=canvas.height;
    }

2.运用clearRect要领：

function clearCanvas(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,canvas.width,canvas.height);
    }

3.可以用某一特定的色彩添补画布，从而抵达清空的目标：

function clearCanvas()  
{  
    var canvas=document.getElementById("Canvas");  
    var ctx= canvas.getContext("2d");  
      
    cxt.fillStyle="#000000";  
    cxt.beginPath();  
    cxt.fillRect(0,0,c.width,c.height);  
    cxt.closePath();  
}

搜检浏览器是不是支撑

最新版的 FireFox，Safari，Chrome 和 Opera 都支撑 HTML5 canvas，然则 IE8及以下都不支撑canvas。下面的代码用于检测浏览器的是不是支撑canvas
var canvas = document.getElementById(“canvas”);
if (canvas.getContext){

var ctx = canvas.getContext('2d');
// 支撑

} else {

// 不支撑

}

    原文作者：青灯油纸
    原文地址: https://segmentfault.com/a/1190000013886619
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞