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

Canvas标签是什么意义【html5教程】

2019-11-26HTML搜搜PHP网54°c
A+ A-
Canvas是能够运用剧本(一般为 JavaScript)在个中绘制图象的HTML元素。它能够用来制造照片集或许制造简朴(也不是那末简朴)的动画,以至能够举行及时视频处置惩罚和衬着。

在html中,canvas标签用来定义图形,比方图表和其他图象,必需运用剧原本绘制图形,例如在画布上画一个赤色矩形,渐变矩形,彩色矩形,和一些彩色的笔墨。

1.什么是canvas?

HTML5canvas元素用于图形的绘制,经由过程剧本 (一般是JavaScript)来完成.

canvas标签只是图形容器,您必需运用剧原本绘制图形。

你能够经由过程多种要领运用 canvas 绘制途径,盒、圆、字符以及增加图象。

2.Canvas基础运用

<canvas id="myCanvas" width="200" height="100"

style="border:1px solid #000000;">

</canvas>

2.1 <canvas> 元素

<canvas> 看起来和 <img> 标签一样,只是 <canvas> 只要两个可选的属性 width、heigth 属性,而没有 src、alt 属性。

假如不给 <canvas> 设置 widht、height 属性时,则默许 width为300、height 为 150,单元都是 px。也能够运用 css 属性来设置宽高,然则如宽高属性和初始比例不一致,他会涌现歪曲。所以,发起永久不要运用 css 属性来设置 <canvas> 的宽高。

2.2案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ki4网(ki4.cn)</title>
<style type="text/css">
canvas {
    border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="tutorial" width="300" height="300"></canvas>
<script type="text/javascript">
function draw(){
    var canvas = document.getElementById('tutorial');
    if(!canvas.getContext) return;
    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);
}
draw();
</script>
</body>
</html>

结果以下:

以上就是Canvas标签是什么意义的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
Canvas标签是什么意义【html5教程】

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