什么是 Canvas?
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:
引用
<canvas id="myCanvas" width="200" height="100"></canvas>
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用 id 来寻找 canvas 元素:
var c=document.getElementById("myCanvas");
然后,创建 context 对象:
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。
理解坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
更多 Canvas 实例
下面的在 canvas 元素上进行绘画的更多实例:
实例 - 线条
通过指定从何处开始,在何处结束,来绘制一条线:
var c = document.getElementById("myCanvas");
//获取2d绘图对象,无论我们调用多少次获取的对象都将是相同的对象。
var cxt=c.getContext("2d");
//设置起始点坐标,当前容器距离左上角x坐标轴10px,y坐标轴10px
cxt.moveTo(10,10);
//第一根线:设置第一根直线另一端的坐标点(x,y),两点为一直线,不理解的同学可以自己手动实验一下
cxt.lineTo(150,50);
//第二根线:设置第二根直线另一端的坐标点(x,y),看效果你们就理解了,第二根线是接着第一根线的末尾花的,不会起始点
cxt.lineTo(10,50);
//设置x=20,y=100位置的文字"test"
//cxt.fillText('test',20,100);
//填充画布颜色
//cxt.fillStyle="#FF0000";
//fillRect(left,top,width,height)绘制矩形,并以fillStyle填充。
//cxt.fillRect(0,0,150,75);
//画笔
cxt.stroke();
实例 - 圆形
通过规定尺寸、颜色和位置,来绘制一个圆:
var c = document.getElementById("myCanvas");
//获取2d绘图对象,无论我们调用多少次获取的对象都将是相同的对象。
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
//开启路径的绘制,重置path为初始状态,我尝试过不用这个方法,圆也可以绘制成功
cxt.beginPath();
//绘制圆,绘制弧,圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小;
// 圆 x y 半径 弧度
cxt.arc(100,30,20,0,Math.PI*2);
//绘制路径path结束,它会绘制一个闭合的区间,添加一条起始位置到当前坐标的闭合曲线;我尝试过不用这个方法,圆也可以绘制成功
cxt.closePath();
//填充圆,必须写,不能少
cxt.fill();
[size=small]
实例 - 渐变
[/size]
使用您指定的颜色来绘制渐变背景:
var c = document.getElementById("myCanvas");
//获取2d绘图对象,无论我们调用多少次获取的对象都将是相同的对象。
var cxt=c.getContext("2d");
//创建一个渐变对象
//第一个参数,在x坐标轴为10的地方开始渐变第一个颜色,在下面设置的颜色
//第一个参数,在y坐标轴为20的地方开始渐变第二个颜色,在下面设置的颜色
var grd=cxt.createLinearGradient(10,20,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
如下:
Canvas相关方法:
clecrRect(left,top,width,height)清除制定矩形区域,
fillRect(left,top,width,height)绘制矩形,并以fillStyle填充。
fillText(text,x,y)绘制文字;
strokeRect(left,top,width,height)绘制矩形,以strokeStyle绘制边界。
beginPath():开启路径的绘制,重置path为初始状态;
closePath():绘制路径path结束,它会绘制一个闭合的区间,添加一条起始位置到当前坐标的闭合曲线;
moveTo(x,y):设置绘图其实坐标。
lineTo(x,y);绘制从当前其实位置到x,y直线。
fill(),stroke(),clip():在完成绘制的最后的填充和边界轮廓,剪辑区域。
arc():绘制弧,圆心位置、起始弧度、终止弧度来指定圆弧的位置和大小;
rect():矩形路径;
drawImage(Imag img):绘制图片;
quadraticCurveTo():二次样条曲线路径,参数两个控制点;
bezierCurveTo():贝塞尔曲线,参数三个控制点;
createImageData,getImageData,putImageData:为Canvas中像素数据。ImageData为记录width、height、和数据 data,其中data为我们色素的记录为
argb,所以数组大小长度为width*height*4,顺序分别为rgba。getImageData为获取矩形区域像素,而putImageData则为设置矩形区域像素;
引用:http://www.3wschool.com.cn/
- 大小: 632 Bytes
- 大小: 717 Bytes
- 大小: 727 Bytes
- 大小: 2.9 KB
分享到:
相关推荐
HTML5之画布Canvas.doc中详解了Canvas的精华,但愿能帮上正在路上学习的人
canvas操作插件fabric.js使用方法详解 fabric.js是一个很好用的 canvas 操作插件,下面整理了一些平时项目中用到的知识点: //1: 获得画布上的所有对象: var items = canvas.getObjects(); //2: 设置画布上的...
《HTML 5 Canvas基础教程》从HTML5和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5Canvas的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让...
CSS3 渐变新特性和HTML5 Canvas画布背景渐变实现方法详解 大家好,又见面了,感觉我上一篇博客对部分同学都挺有帮助的,于是我决定继续写下去,会继续的解析知识点让大家更容易理解,希望能给大家带来帮助,愿意一起...
主要介绍了微信小程序 wxapp画布 canvas的相关资料,需要的朋友可以参考下
canvas有个很强大的api是drawImage()(w3c): 他的主要功能就是绘制图片...1. canvas标签+id <canvas id=canvas1></canvas> 2. 获取canvas+设置宽高 var cav1 = document.getElementById('canvas1'), wWidth = 800,
Canvas画布 js属性arcTo弧线画法详解 OK大家好,谢谢大家阅读我的文章,那么话不多说,我们直接进入正题。 关于Canvas画布,基本上都是前端工程师必须了解和掌握的一个知识点,那么看起来Canvas并不是那么的困难,...
今天用 canvas 做 H5 的时候遇到了闪屏问题。闪烁效果如下图: 问题简介 功能简介 H5 该部分的功能为:通过点击二级菜单,切换图片的遮罩或者更换背景。 因为功能简单,所以用了原生 canvas 实现这个功能。但在...
1. 画布(canvas) 画布就是turtle为我们展开用于绘图区域,我们可以设置它的大小和初始位置。 设置画布大小 turtle.screensize(canvwidth=None, canvheight=None, bg=None),参数分别为画布的宽(单位像素), 高, 背景...
IOS,等移动开发都是相同的,创建个上下文,给你个画布再上画,官网给的小例子都比较全了自己去看吧,drawImage时没有反应不知道是BUG还是电脑不能测试待定,http://wxopen.notedown.cn/api/api-canvas.html ...
1. 画布(canvas) 1.1 设置画布大小 2. 画笔 2.1 画笔的状态 2.2 画笔的属性 2.3 绘图命令 3. 命令详解 4. 绘图举例 4.1 太阳花 4.2 绘制小蟒蛇 4.3 绘制五角星 python2.6版本中后...
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。 在矩形区域的画布上,控制其每一像素,JavaScript 来绘制 2D图形,逐像素进行渲染。可以通过多种方法使用canvas 元素绘制路径、矩形、圆形、字符以及添加...
创建一个Canvas画布的方法如下:复制代码代码如下:<canvas id=”canvas” width=”600” height=”400”></canvas> 可以在标签中添加<canvas>标签不可用时的替代文本,如下所示: 复制代码代码如下:<canvas id=”...
简介什么是Fabric.js?...Canvas提供一个好的画布能力, 但是Api不够友好。绘制简单图形其实还可以, 不过做一些复杂的图形绘制, 编写一些复杂的效果,就不是那么方便了。Fabric.js就是为此而开发,它
本篇文章主要介绍了html5 canvas常用api总结(二)--绘图API ,canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关...
思路:继续使用Canvas截图后将画布内容转换为pdf文件。 首先我们需要引入js文件jspdf.debug.js 下载路径 https://github.com/MrRio/jsPDF 引入canvas的js文件,js文件获取地址官网主页:...
12.4.5 tabindex属性 240 12.5 小结 240 12.6 习题 240 第13章 HTML 5的结构 242 视频讲解:20分钟 13.1 新增的主体结构元素 243 13.1.1 article元素 243 13.1.2 section元素 245 13.1.3 nav元素 ...
canvas可以绘制出很多奇妙的样式和美丽的效果,通过几个简单的api就可以在画布上呈现出千变万化的效果,还可以制作网页游戏,接下来就总结一下和绘图有关的API。 绘画的时候canvas相当于画布,而context相当于画笔。...
1. 画布(canvas) 画布就是turtle为我们展开用于绘图区域,我们可以设置它的大小和初始位置。 设置画布大小 turtle.screensize(canvwidth=None, canvheight=None, bg=None),参数分别为画布的宽(单位像素), 高,...