html5基础入门教程学习之canvas基本用法

canvas基本用法

canvas标签是html5中的新标签。而canvas对象表示一个html画布元素，它支持脚本客户端绘图操作。

接下来，我们就canvas的基本用法做下简单的介绍。

定义canvas元素

canvas只有两个属性（当然不包括id属性，id属性是任何html元素都有的），即width和height。这两个属性都是可选的。默认值是宽300px，高150px。在这边，有一点需要注意，虽然可以通过css来调整canvas的大小，但渲染图像会缩放来适应布局，如果发现渲染结果看上去变形了，那可以显示的指定canvas的width属性和height属性。像上面那样。

canvas元素可以像普通图片那样为其指定样式，这些样式不会对canvas实际生产的图片产生什么影响。如果不指定样式，canvas默认是全透明的。

替用内容

由于canvas标签是html5中的新标签，并不是所有浏览器都支持。所以通常我们需要为那些不支持canvas的浏览器提供替用的显示内容。

我们只需要直接在canvas标签中插入内容即可。不支持该标签的浏览器会自动忽略而直接渲染替用内容；而支持的浏览器则会正常的渲染canvas。

例如，我们可以把一些文字或图片填入canvas内，作为替用内容：

注意：结束标签是必须的。在safari里，canvas的实现跟img很相似，它没有结束标签。然而，为了使其能更广泛的适用，我们必须给它加上结束标签。safari会自动忽略结束标签。

渲染上下文

canvas初始化是空白的，要在上面用脚本画图首先需要其渲染上下文，可以通过canvas对象的getContext方法来获取，同时得到的还有一些画图用的函数。getContext方法接受一个用于描述其类型的值作为参数。返回一个用于在画布上绘图的环境。其语法是这样的：

canvas.getContext(contextID)

参数contextID指定了想要在画布上绘制的类型。当前唯一的合法值是‘2d’，它指定了二维绘图。并且导致这个方法返回一个环境对象。

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

上面通过getElementById方法取得canvas对象的DOM节点。然后通过气getContext方法取得其画图操作上下文。

检查浏览器的支持

除了在那些不支持canvas的浏览器上显示替用内容，还可以通过脚本的方式来检查浏览器是否支持canvas。方法很简单，判断getContext是否存在即可。

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

新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。

说了这么多，一起来看一个简单的例子吧：

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);
      }
    }

上面的例子在画布上画了两个正方形，一个红色，一个透明度为50%的蓝色。