js画布组件(canvas/canvas)
一、Canvas是什么?
Canvas就是一个画布,可以进行画任何的线、图形、填充等一系列的操作,而且操作的画图就是js,所以让js编程到了嗑药的地步。另外Canvas不仅仅提供简单的二维矢量绘图,也提供了三维的绘图,以及图片处理等一系列的api支持。
二、Canvas重要Context对象
(1) 要使用Canvas来绘制图形必须在页面中添加Canvas的标签。
例如: <canvas id="demoCanvas" width="500" height="500"> <p>爷,你还在上个世纪吧,现在都html5了,您还在ie6时代?</p> </canvas>
(2) 当然只有上面的标签,只能是创建好了一个画布,其中width和height属性就是设置画布的大小。Id属性也是必须的,后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvase的Dom对象就可以获取他的上下文了,Canvas绘制图形都是靠着Canvas对象的上下文对象.
代码:
<script type="text/javascript">
//第一步:获取canvas元素
var canvasDom = document.getElementById("demoCanvas");
//第二步:获取上下文
var context = canvasDom.getContext('2d');
</script>
(3) Context上下文默认两种绘制方式:第一种:绘制线(stroke),第二种:填充:fill。
注意:决定了使用哪种方式之后,在填充或者绘制线之前先设置样式。
三、Canvas Fisrt Demo:画一个立体透明的矩形
Canvas绘制的总体的步骤
- 创建HTML页面,设置画布标签
- 编写js,获取画布dom对象
- 通过Canvas标签的Dom对象获取上下文
- 设置绘制线样式、颜色
- 绘制矩形,或者填充矩形
Canvas绘制一个矩形和填充一个矩形的Demo
<body><canvas id="demoCanvas" width="500" height="500"><p>爷,你还在上个世纪吧,现在都html5了,您还在ie6时代?</p></canvas><!---下面将演示一种绘制矩形的demo---><script type="text/javascript">//第一步:获取canvas元素var canvasDom = document.getElementById("demoCanvas");//第二步:获取上下文var context = canvasDom.getContext('2d');//第三步:指定绘制线样式、颜色context.strokeStyle = "red";//第四步:绘制矩形,只有线。内容是空的context.strokeRect(10, 10, 190, 100);//以下演示填充矩形。context.fillStyle = "blue";context.fillRect(110,110,100,100);</script> </body>
最终效果下图:
四、Canvas绘制线条
Context对象的beginPath方法表示开始绘制路径,moveTo(x, y)方法设置线段的起点,lineTo(x, y)方法设置线段的终点,stroke方法用来给透明的线段着色。moveto和lineto方法可以多次使用。最后,还可以使用closePath方法,自动绘制一条当前点到起点的直线,形成一个封闭图形,省却使用一次lineto方法。
<body><canvas id="demoCanvas" width="500" height="600"></canvas><script type="text/javascript">//通过id获得当前的Canvas对象var canvasDom = document.getElementById("demoCanvas");//通过Canvas Dom对象获取Context的对象var context = canvasDom.getContext("2d");context.beginPath(); // 开始路径绘制context.moveTo(20, 20); // 设置路径起点,坐标为(20,20)context.lineTo(200, 200); // 绘制一条到(200,20)的直线context.lineTo(400, 20);context.closePath();context.lineWidth = 2.0; // 设置线宽context.strokeStyle = "#CC0000"; // 设置线的颜色context.stroke(); // 进行线的着色,这时整条线才变得可见</script></body>
五、Canvas绘制文本
Context上下文对象的fillText(string, x, y)方法是用来绘制文本,它的三个参数分别为文本内容、起点的x坐标、y坐标。使用之前,需用font设置字体、大小、样式(写法类似与CSS的font属性)。与此类似的还有strokeText方法,用来添加空心字。另外注意一点:fillText方法不支持文本断行,即所有文本出现在一行内。所以,如果要生成多行文本,只有调用多次fillText方法。
以下是代码Demo:
<canvas id="demoCanvas" width="500" height="600"></canvas><script type="text/javascript">//通过id获得当前的Canvas对象var canvasDom = document.getElementById("demoCanvas");//通过Canvas Dom对象获取Context的对象var context = canvasDom.getContext("2d");context.moveTo(200,200);// 设置字体context.font = "Bold 50px Arial";// 设置对齐方式context.textAlign = "left";// 设置填充颜色context.fillStyle = "#005600";// 设置字体内容,以及在画布上的位置context.fillText("老马!", 10, 50);// 绘制空心字context.strokeText("blog.itjeek.com!", 10, 100);</script>
六、Canvas绘制圆形和椭圆
在上一篇文章中,笔者已经跟大家介绍过了绘制矩形,绘制其他形状,比如圆形等,都是一个思路,只不过是方法不同罢了。那接下里给各位演示一小绘制圆形和椭圆。Context上下文的arc方法就是绘制圆形或者椭圆,arc方法的x和y参数是圆心坐标,radius是半径,startAngle和endAngle则是扇形的起始角度和终止角度(以弧度表示),anticlockwise表示做图时应该逆时针画(true)还是顺时针画(false)。
以下是绘制图形的Demo:
<canvas id="demoCanvas" width="500" height="600"></canvas><script type="text/javascript">//通过id获得当前的Canvas对象var canvasDom = document.getElementById("demoCanvas");//通过Canvas Dom对象获取Context的对象var context = canvasDom.getContext("2d");context.beginPath();//开始绘制路径//绘制以 (60,60)为圆心,50为半径长度,从0度到360度(PI是180度),最后一个参数代表顺时针旋转。context.arc(60, 60, 50, 0, Math.PI * 2, true);context.lineWidth = 2.0;//线的宽度context.strokeStyle = "#000";//线的样式context.stroke();//绘制空心的,当然如果使用fill那就是填充了。</script>
七、Canvas绘制图片
Canvas绘制图片应该是他的一大特点或者是亮点吧。当然配合File的API,让JS变得无可匹敌。那接下里给大家演示一下怎样绘制图片,并且做出一个立体效果出来。
以下是绘制图片的Demo:
<canvas id="demoCanvas" width="500" height="600"></canvas><script type="text/javascript">//通过id获得当前的Canvas对象var canvasDom = document.getElementById("demoCanvas");//通过Canvas Dom对象获取Context的对象var context = canvasDom.getContext("2d");var image = new Image();//创建一张图片image.src = "Images/a.png";//设置图片的路径image.onload = function() {//当图片加载完成后for (var i = 0; i < 10; i++) {//输出10张照片//参数:(1)绘制的图片 (2)坐标x,(3)坐标ycontext.drawImage(image, 100 + i * 80, 100 + i * 80);}};</script>
八、总结
Canvas总算介绍了最基本的用法了。当然本文大量借鉴了其他网站的例子。作者也是把最基本的精华部分罗列了一下。总体来说Canvas绘制图片和文本、形状都不是很难,API代码上手难度基本就是初级。但是由此而带来的非常多的可能,让Html5真正的强大到无可比拟的地步。
当然本文并没有涉及到Canvas3D绘制的相关内容,而且关于Canvas绘制渐变色、绘制阴影、图片的相关处理操作等,这些内容,如果读者确实需要的可以自行搜索查找相关资料或者直接阅读Html5的最新标准文档。
转载于:https://www.cnblogs.com/jgjk/p/7638098.html
js画布组件(canvas/canvas)相关推荐
- 鸿蒙应用开发之canvas画布组件介绍
canvas画布组件用于自定义绘制图形. 方法:getContext和toDataURL getContext:getContext('2d')函数用于获取2D绘图引擎,调用方法为var ctx = ...
- 【Unity3D-UGUI系列】(一)Canvas 画布组件详解
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉 ...
- Chart.js清空canvas画布 clearRect()等canvas方法擦除失败(附完整代码)
Chart.js清空canvas画布 clearRect等canvas方法擦除失败 一.直接移除DOM对象方式 原因 方法 二.完整代码 html javascript chart.js画图方法 三. ...
- Seen.js – 使用 SVG 或者 Canvas 渲染 3D 场景
Seen.js 渲染3D场景为 SVG 或者 HTML5 画布.Seen.js 包含对于 SVG 和 HTML5 Canvas 元素的图形功能的最简单的抽象.所有这个库的其它组件都是不用关心将要渲染的 ...
- UGUI组件之Canvas 组件简单笔记
Canvas 组件介绍 Canvas 组件的用途是用于 UGUI 系统内的 UI 游戏物体的渲染. 如果没有该组件,所有的 UGUI 游戏物体都将无法显示. 而 Canvas 组件本身又分为三种渲染模 ...
- 详解exif.js,应用于canvas照片倒转(海报H5)
业务背景,苹果手机调用上传接口拍照没有问题但是上传到网页上照片倒转了解决方法利用exif.js读取图片参数并对图片进行元数据修改 window.btoa(str)转码 window.atob(base ...
- 微信小程序动态点赞php,微信小程序小组件 基于Canvas实现直播点赞气泡效果
这篇文章主要为大家详细介绍了微信小程序小组件,基于Canvas实现直播点赞气泡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先发Canvas实现直播点赞气泡效果图: 实现细节: 1.JS:d ...
- 微信小程序动态点赞php,微信小程序小组件基于Canvas实现直播点赞气泡效果
这篇文章主要为大家详细介绍了微信小程序小组件,基于Canvas实现直播点赞气泡效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先发Canvas实现直播点赞气泡效果图: 实现细节: 1.JS: ...
- 微信小程序子组件使用canvas无效,线条画不出颜色
微信小程序子组件使用canvas无效,线条画不出颜色 小程序中在page中直接使用canvas是这样使用的: // canvas 全局配置 var context = null; Page({data ...
最新文章
- 【控制】《多智能体系统的协同群集运动控制》陈杰老师-第6章-参数不确定的高阶非线性多智能体系统一致性控制
- ERROR: 资源短缺 PXA_NO_FREE_SPACE
- 几种常见的集成触发器(D、T、JK)
- leetcode 1207. 独一无二的出现次数(map+set)
- python mysql lastrowid_加快MySQL对lastrowid的多个单次插入
- C++ Primer Plus 随记(第八章)
- System.BadImageFormatException: 试图加载格式不正确的程序。 (异常来自 HRESULT:0x8007000B)...
- ★☆★书已到手《Java程序员,上班那点事儿》正式上架★☆★
- Qt编写输入法V2019终极版
- 【转载】《武学求真录》和《逝去的武林》及《老拳师的故事》 -3
- 任正非让寒气传递到每个人身上,互联网寒冬程序员该如何破冰?
- 分享几个国外电子书下载网站
- python 返回函数 变量_你如何设置一个变量等于由python函数返回的值
- 单片机自制时钟(年月日星期时分秒显示、按键校准)
- R语言基础教程6:程序设计基础
- php生成CAD图纸,CAD怎么创建块?CAD创建块的命令
- apa引用要在文中吗_如何根据 APA 格式排版?
- wamp设置php目录,PHP配置环境更改wamp的www目录
- 第十六章 Unity 预制件prefab(上)
- 解决IDEA JavaWeb项目启动运行后出现404错误