星空网 > 软件开发 > 网页设计

html5 之 canvas 相关知识(一)概念及定义

什么是 Canvas?

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

<canvas> 标签只是图形容器,它没有自己的行为,需要定义API 支持脚本化客户端绘图操作。

创建 Canvas 元素

canvas的代码很简单,定义一个ID以及宽和高。这里强调一点:canvas的宽高必须写在元素上,如果用样式定义,不能改变其图片的比例

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

如何使用 <canvas> 标记绘图

大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素本身上,而是定义在通过画布的 getContext() 方法获得的一个“绘图环境”对象上。

 这是通过 Canvas 对象的 getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。

<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.fillRect(0,0,150,75);</script>

提示:在未来,如果 <canvas> 标签扩展到支持 3D 绘图,getContext() 方法可能允许传递一个 "3d" 字符串参数。




原标题:html5 之 canvas 相关知识(一)概念及定义

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

Sirclo:https://www.ikjzd.com/w/2069
亚马逊手工平台handmade:https://www.ikjzd.com/w/207
印度WPC认证:https://www.ikjzd.com/w/2070
Montir:https://www.ikjzd.com/w/2071
和新电商:https://www.ikjzd.com/w/2072
East Ventures:https://www.ikjzd.com/w/2073
独家丨B站广告位可跳转美团APP B站为电商平台引流再升级 :https://www.kjdsnews.com/a/1836410.html
百崖大峡谷生态旅游景区(探秘中国西南自然风光):https://www.vstour.cn/a/363176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流