HTML5 如何创建Canvas画布

更新日期: 2020-07-08阅读: 2.2k标签: Canvas

 <canvas> 标签是 html5 中新增的标签,通过使用 JavaScript 中的脚本来绘制图形。在页面上放置一个 canvas 元素,就相当于在页面上放置了一块画布,canvas 元素拥有多种绘制矩形、圆形、字符、路径以及添加图像的方法。

但是我们并不是使用鼠标在画布中画画的哟,其实 <canvas> 标签本身没有绘制图形的能力,它只是一个图形容器,要想在这个容器中绘制图形,则必须使用 JavaScript 脚本来完成。


创建画布

<canvas> 是一个双标签,我们可以通过标签中的 width 和 height 属性来定义画布的大小,这样就会在页面中创建一个隐藏的画布,如果要实际看到这个画布,可任意通过 style 属性为画布添加边框。

示例:

例如定义一个宽高都为 200px ,边框为 2px、实线、黑色的画布:

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>HTML5学习(9xkd.com)</title>
    </head>
    <body>
       <canvas width="200px" height="200px" style="border: 2px solid #000;"></canvas>
    </body>
</html>

如果我们没有给 <canvas> 设置宽和高,则会默认 width 为 300px,height 为 150px。css 属性也可以用来设置宽和高,但是如果宽高属性和初始比例不一致,会出现扭曲。所以建议不要使用 CSS 中的属性来设置 <canvas> 的宽高。


绘制图像

上面我们讲了 <canvas> 本身是没有绘制图像的能力,如果要绘制图像必须通过 JavaScript 中的脚本来实现。

通常我们需要在 <canvas> 标签中指定一个 id 属性,方便我们能快速的通过标签来找到 canvas 元素。

示例:

例如在创建好的画布中绘制一个蓝色矩形:

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>HTML5学习(9xkd.com)</title>
    </head>
    <body>
       <canvas id="mycanvas" width="200px" height="200px" style="border: 2px solid #000;"></canvas>
       <script>
           var can = document.getElementById("mycanvas");
           var ctx = can.getContext("2d");
           ctx.fillStyle = "#99CCFF";
           ctx.fillRect(50, 50, 100, 100);
       </script>
    </body>
</html>

在 HTML 代码中引用 JavaScript 代码有两种方法,一种是直接在 <script> 标签中书写,还有一种是单独创建一个 .js 文件,然后在 HTML 页面中通过 <script> 标签引入 .js 文件,例如:

<script src="./index.js"></script>

上述代码中 getElementById() 方法用于返回对拥有指定 ID 的第一个对象的引用,所带参数为指定元素的 id 属性值。

而 getContext() 方法返回一个用于在画布上绘图的环境,参数指定了想要在画布上绘制的类型,当前唯一的合法值为 2d,表示二维绘图。


总结

使用 <canvas> 标签来创建画布其实很简单,比较复杂的是如何在画布中绘制图形,这涉及到很多属性和方法。


链接: https://www.fly63.com/article/detial/9400

HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图

Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网页上渲染动态效果图。

web图片前端裁剪功能实现_利用html5 canvas技术实现图片裁剪

上传截图很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。用canvas提供的API实现纯前端的剪切:这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域。

原生js使用canvas实现图片格式webp/png/jpeg在线转换

javascript完成图片格式转换: 通过input上传图片,使用FileReader将文件读取到内存中。将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,最后将canvas转换为图片。

离屏Canvas — 使用Web Worker提高你的Canvas运行速度

现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了!Canvas 是一个非常受欢迎的表现方式,同时也是WebGL的入口。它能绘制图形,图片,展示动画,甚至是处理视频内容

canvas高效绘制10万图形,你必须知道的高效绘制技巧

最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。

利用canvas将网页元素生成图片并保存在本地

利用canvas将网页元素生成图片并保存在本地,首先引入三个文件,createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name) > createElementNS() 方法与 createElement() 方法相似

基于 HTML5 Canvas 的智能安防 SCADA 巡逻模块

随着大数据时代的来临,物联网的日益发展,原先的 SCADA 系统本身也在求新求变,从最开始的专业计算机和操作系统,到通用计算机和相关软件,再到现在基于 HTML5 Canvas 的新型组态开发,其应用的范围也从最初的电力

js用canvas实现简单的粒子运动

在写下合格粒子运动时要先清楚你的思路,不能一开始就盲目的开始写,首先先要确定思路然后在去一步步的实现,在写的过程要注意细节,要思考js有些知识是跟数学知识相关的要注意观察

Canvas 点线动画案例

canvas 画的圆不是圆,是椭圆。不要在style里指定 Canvas 的宽度,Canvas 画布的尺寸的大小和显示的大小是有很大的区别的,在 canvas 里面设置的是才是 Canvas 本身的大小。不要企图通过闭合现有路径来开始一条新路径

Canvas在移动端绘制模糊的原因与解决办法

由于一些移动端的兼容性原因,我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决,我们采用了pdf.js这个插件,该插件可以将pdf转换成canvas绘制在页面上

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!