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%的蓝色。
更多推荐
html5基础入门教程学习之canvas基本用法
发布评论