Canvas怎样运用【html5教程】,canvas

Canvas是一个HTML5元素，能够运用JavaScript编程言语轻松有力地绘制图形，开发人员喜好运用它来建立雄厚的Web应用程序。用户能够在不运用Adobe的Flash播放器等专有浏览器插件的情况下运用这些应用程序。

下面我们就来细致看一下canvas元素怎样运用。

canvas元素只能作为图形的容器; 因而，我们应当运用JavaScript来衬着图形

我们在Canvas上绘制图形，须要起首运用文档对象模子（DOM）举行目的定位。而且，运用id属性将协助你辨认婚配的目的位置。

我们来看一个canvas元素的代码

<canvas width="320" height="160" id="canvasExample"></canvas>

Canvas元素许可两个特定属性：width和height。

假如不为这两个属性供应值，则Canvas将运用宽度为300像素，高度为150像素的默认值。

该ID属性被用于辨认在JavaScript代码Canvas元素。

最初，<canvas>元素为空。因而，为了展现某些内容，JavaScript剧本应当在绘制之前猎取衬着上下文。

Canvas元素有一个内置的DOM要领，称为getContext。它是一个JavaScript函数，用于接见衬着上下文及其画图要领。

此函数接收单个参数，通常是2D图形上下文（定义为“2d”）

比方，要在Canvas上建立矩形外形，须要以下属性和函数：

fillStyle =“color ” -为矩形增加色彩。

fillRect（x，y，width，height） -绘制一个添补的矩形

strokeRect（x，y，width，height） -给矩形供应了表面

clearRect（x，y，width，height） -它消灭指定的矩形截面并使其完整通明

为了定义坐标，运用Canvas网格或坐标系。原始尺寸位于Canvas地区的左上角，坐标为（0,0）。

因而，X坐标将向右挪动，而Y坐标将向下挪动。间隔以像素为单元

x给出从左上角到右上角的程度位置

y给出从左上角到下边的垂直位置

width给出矩形的宽度

height给出矩形的高度

细致的代码以下

<!DOCTYPE html>
 
<html>
 
<head>
 
<title>JavaScript HTML5 Canvas Example</title>
 
</head>
 
<body onload="canvasExample()">
 
<canvas width="320" height="160" id="canvasExample"></canvas>
 
<script>
 
function canvasExample(){
 
var canvas = document.getElementById("canvasExample");
 
if(canvas.getContext){
 
var context = canvas.getContext('2d');
 
context.fillStyle = "blue";
 
context.fillRect(50,50,150,250);
 
context.clearRect(75,75,100,50);
 
context.strokeRect(90,90,75,20);
 
 
}else{
 
alert("Please a Canvas-Supporting Web Browser");
 
}
 
}
 
</script>
 
</body>
 
</html>

浏览器上显现结果以下