搜文章
推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 跟谁学编程 > <canvas> | HTML5 图像容器标签

<canvas> | HTML5 图像容器标签

跟谁学编程 2021-01-14

定义与用法

  • <canvas> 的英文含义是“画布”,该标签定义图形,比如图表和其他图像。

  • <canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

  • <canvas> 标签是 HTML 5 中的新标签;IE 8 或更早版本的 IE 浏览器不支持 <canvas> 标签。


语法格式

<canvas id=”” width =”” height =”” style = “”>……</canvas>


示例代码

<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>

效果展示:


点击下方“阅读原文”可亲试效果



浏览器支持

IE Firefox Chrome Safari Opera
<canvas> | HTML5 图像容器标签 <canvas> | HTML5 图像容器标签 <canvas> | HTML5 图像容器标签 <canvas> | HTML5 图像容器标签 <canvas> | HTML5 图像容器标签

主流浏览器都支持<canvas> 标签,Internet Explorer 8 以及更早的版本不支持 <canvas> 标签。



标签属性

属性 描述
height<canvas> | HTML5 图像容器标签 pixels 规定画布的高度。
width pixels 规定画布的宽度。

全局属性


<canvas> 标签支持 HTML 的全局属性。



事件属性


<canvas> 标签支持 HTML 的事件属性。



更多示例


canvas元素可以完成非常复杂的绘图,我们在canvas元素的教程中会详细介绍canvas中诸多元素的功能。


让我们一起体验另外一个示例,在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字。

<canvas id="myCanvas" width="270" height="160" style="border:1px solid #c3c3c3;">你的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var canvOK = 1;
try {
c.getContext("2d");
} catch(er) {
canvOK = 0;
}
if (canvOK == 1) {
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(20, 20, 100, 50);

var grd = ctx.createLinearGradient(140, 20, 240, 70);
grd.addColorStop(0, "black");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(140, 20, 100, 50);

var grd2 = ctx.createLinearGradient(20, 90, 120, 90);
grd2.addColorStop(0, "black");
grd2.addColorStop("0.3", "magenta");
grd2.addColorStop("0.5", "blue");
grd2.addColorStop("0.6", "green");
grd2.addColorStop("0.8", "yellow");
grd2.addColorStop(1, "red");
ctx.fillStyle = grd2;
ctx.fillRect(20, 90, 100, 50);

ctx.font = "30px Verdana";
var grd3 = ctx.createLinearGradient(140, 20, 240, 90);
grd3.addColorStop(0, "black");
grd3.addColorStop("0.3", "magenta");
grd3.addColorStop("0.6", "blue");
grd3.addColorStop("0.8", "green");
grd3.addColorStop(1, "red");
ctx.strokeStyle = grd3;
ctx.strokeText("Smile!", 140, 120);
}
</script>

效果展示:


点击下方“阅读原文”可亲试效果

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《<canvas> | HTML5 图像容器标签》的版权归原作者「跟谁学编程」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注跟谁学编程微信公众号

跟谁学编程微信公众号:JustForScience

跟谁学编程

手机扫描上方二维码即可关注跟谁学编程微信公众号

跟谁学编程最新文章

精品公众号随机推荐