hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

Canvas怎样运用【html5教程】

2019-11-26HTML搜搜PHP网56°c
A+ A-
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>

浏览器上显现结果以下

以上代码中JavaScript中所完成的是:

起首经由过程DOM辨认Canvas元素

上下文已定义

fillRect()函数生成一个150 x 250像素的矩形

然后clearRect()函数从中间删除一个100 x 50像素的矩形

末了,strokeRect()函数在消灭地区内组织一个75 x 20像素的矩形

以上就是Canvas怎样运用的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
Canvas怎样运用【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: