Canvas 是H5的一部分,允许脚本语言动态渲染图像。Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(api),在网页上渲染动态效果图。
游戏:毫无疑问,游戏在HTML5领域具有举足轻重的地位。HTML5在基于Web的图像显示方面比Flash更加立体、更加精巧。
图表制作:图表制作时常被人们忽略,但无论企业内部还是企业间交流合作都离不开图表。现在一些开发者使用HTML/css完成图标制作。当然,使用SVG(可缩放矢量图形)来完成图表制作也是非常好的方法。
字体设计:对于字体的自定义渲染将完全可以基于Web,使用HTML5技术进行实现。
图形编辑器:图形编辑器能够100%基于Web实现。
其他可嵌入网站的内容:类似图表、音频、视频,还有许多元素能够更好地与Web融合,并且不需要任何插件。
1.使用<canvas>必须先设置其width和height属性,指定可绘图区域大小,只指定宽高不添加样式或者绘制图像的话,在页面中将看不到该元素。
<canvas id='draw' width='200px' height='200px'></canvas>
2 .绘制图像的话,我们首先要取到canvas并调用getContext()方法,然后传入上下文名字(2D/3D),2D有两种基本绘图操作|填充(fillStyle)|描边(strokeStyle)|,这两个属性默认值为#000
var draw = document.getElementById('draw');
//确认浏览器是否支持<canvas>元素
if(draw.getContext){
var context = draw.getContext('2d');
//给context绘制红色的边框
context.strokeStyle = '#f00';
//内部填充大草原的颜色
context.fillStyle = '#0f0';
}
3 .使用toDataURL()方法,可以导出<canvas>元素上绘制的图像
var draw = document.getElementById('draw');
if(draw.getContext){
//显示图像,toDataURL()获取到的是一串base64的字符串
var drawURL = draw.toDataURL('image/png');
var image = document.createElement('img');
image.src = drawURL;
document.body.appendChild(image);
}
4 .绘制矩形,主要有三个方法,fillRect()为矩形填充颜色、strokeRect()为矩形描边、clearRect()清除矩形。这三个方法都接收4个参数x/y/w/h,矩形的左上角坐标和宽高
var draw = document.getElementById('draw');
//确认浏览器是否支持<canvas>元素
if(draw.getContext){
var context = draw.getContext('2d');
//绘制红色矩形,绿色描边
context.fillStyle = '#f00';
context.strokeStyle = '#0f0';
context.strokeRect(10,10,50,50);
context.fillRect(10,10,50,50);
//绘制绿色矩形,红色描边
context.fillStyle = '#0f0';
context.strokeStyle = '#f00';
context.strokeRect(10,10,50,50);
context.fillRect(10,10,50,50);
//在两个矩形重叠的地方清除一个小矩形
context.clearRect(40,40,10,10);
}
5 .绘制路径,通过路径可以创造出复杂的形状和线条,要绘制路径,首先要调用beginPath()方法,再通过以下方法来实际的绘制路径
arc(x,y,radius,startAngle,endAngle,conterclockwise)
(x,y)圆心坐标、radius半径、(startAngle,endAngle)起始角度和终止角度、conterclockwise顺时针(false)/逆时针(true)
moveTo(x,y) 将游标移动到(x,y),不画线。可以用来修改所谓的上一点坐标*
arcTo(x1,y1,x2,y2,radius)
从上一点开始绘制一条曲线到(x2,y2),并且以给定的radius穿过(x1,y1)
lineTo(x,y) 从上一点开始绘制一条直线,到(x,y)
rect(x,y,width,height)
从(x,y)开始绘制一个矩形,宽高为width、height。这个方法绘制的是矩形路径,而非strokeRect()和fillRect()所绘制的独立的形状
//接下来绘制一个不带数字的时钟
var draw = document.getElementById('draw');
if(draw.getContext){
var context = draw.getContext('2d');
//开始路径
context.beginPath();
//绘制外圆
context.arc(100,100,99,0,2*Math.PI,false);
//绘制内圆
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
//绘制分针
context.moveTo(100,100);
context.lineTo(100,15);
//绘制时针
context.moveTo(100,100);
context.lineTo(35,100);
//描边路径
context.stroke();
context.strokeStyle = '#f00';
}
6 . 绘制文本,主要有两个方法,fillText(),strokeText(),都接收四个参数|text(要绘制的文本)|x|y|最大像素宽度(可选)|,这两个方法都已下列三个属性为基础
font文字样式,大小,字体等
textAlign 文本对其方式|start|end|left|right|center|
textBaseline 文本的基线|top|hanging|middle|alphabetic|ideographic|bottom|
//在表盘绘制12点
context.font = 'bold 12px Arial';
context.textAlign = 'center';
context.textBaseline = 'middle';
context.fillText('12',100,20);
7 . 变换
rotate(angel) 围绕原点旋转图像angle弧度
scale(scaleX,scaleY) 缩放图像,x*scaleX,y*scaleY 默认1
translate(x,y) 将坐标原点移动到(x,y)
var draw = document.getElementById('draw');
if(draw.getContext){
var context = draw.getContext('2d');
//开始路径
context.beginPath();
//绘制外圆
context.arc(100,100,99,0,2*Math.PI,false);
//绘制内圆
context.moveTo(194,100);
context.arc(100,100,94,0,2*Math.PI,false);
//变换原点
context.translate(100,100);
//旋转表针
context.rotate(1)
//绘制分针
context.moveTo(0,0);
context.lineTo(0,-85);
//绘制时针
context.moveTo(0,0);
context.lineTo(-65,0);
//描边路径
context.stroke();
context.strokeStyle = '#f00';
}
8 . 绘制图像,drawImage()
var img = document.getElementByTagNames('image')[0];
context.drawImage(img,0,10,50,50,0,100,40,60);
9个参数: 要绘制的图像 原图像|x|y|w|h| 目标图像|x|y|w|h|
9 . 阴影和渐变
阴影主要是以下几个属性值
shadowColor
shadowOffsetX : X轴阴影偏移量
shadowOffsetY : Y轴阴影偏移量
shadowBlur : 模糊像素数,默认0,不模糊
var context = draw.getContext('2d');
//设置阴影
context.shadowColor = 'rgba(210,210,210,.5)';
context.shadowOffersetX = '5';
渐变 创建一个新的线性渐变 createLinearGradient()方法,有四个参数|x1|y1|x2|y2|分别为起点的坐标和终点的坐标
var gradient = context.createLinearGradient(30,30,70,70);
gradient.addColorStop(0,'#fff'); //0表示开始
gradient.addColorStop(1,'#000'); //1表示结束
//使用定义好的渐变属性
context.fillStyle = gradient; //填充的时候放入渐变
context.fillRect(30,30,50,50);
创建一个放射渐变 createRadialGradient(),六个参数|x1|y2|radius1|x2|y2|radius2|分别为第一个圆心和半径第二个圆心和半径,用法和线性渐变相同
10 . 使用图像数据,可以通过getImageData()取得原始图像数据。四个参数|x|y|w|h|。每个ImageData对象有三个属性,width/height/data,data是一个数组,内部存着每一个像素的数据,每个元素的值介于0-255之间
var imgdata = context.getImageData(0,0,100,100);
var data = imgdata.data,
red = data[0],
green = data[1],
blue = data[2],
alpha = data[3];
//实现一个灰色过滤器
var draw = document.getElementById('draw');
if(draw.getContext){
var context = draw.getContext('2d');
var img = document.getElementsByTagName('image')[0],
imageData,data,
i,len,average,
red,green,blue,alpha;
//绘制原始图像
context.drawImage(img,0,0,100,100);
//获取图像数据
imageData = context.getImageData(0,0,img.width,img.height);
data = imageData.data;
for(i=0,len=data.length;i<len;i+=4){
red = data[i];
green = data[i+1];
blue = data[i+2];
alpha = data[i+3];
//计算rgb的平均值
average = Math.floor((red+green+blue)/3);
//设置颜色值
data[i] = average;
data[i+1] = average;
data[i+2] = average;
}
imageData.data = data;
//把数据绘制在画布
context.putImageData(imageData,0,0)
}
上传截图很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延。用canvas提供的API实现纯前端的剪切:这里头关键有三步:显示未经处理的图片,得到裁剪区域,显示裁剪后的区域。
javascript完成图片格式转换: 通过input上传图片,使用FileReader将文件读取到内存中。将图片转换为canvas,canvas.toDataURL()方法设置为我们需要的格式,最后将canvas转换为图片。
现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了!Canvas 是一个非常受欢迎的表现方式,同时也是WebGL的入口。它能绘制图形,图片,展示动画,甚至是处理视频内容
最近的一个客户项目中,简化的需求是绘制按照行列绘制很多个圆圈。需求看起来不难,上手就可以做,写两个for循环。,IT行业的知识更新越来越快,能够以不变应万变的人,就是拥有良好的学习力、创造力、判断力和思考力的人。这些能力会让你在变换万千的技术海洋中,屹立不倒,不被淹没。
利用canvas将网页元素生成图片并保存在本地,首先引入三个文件,createElementNS() 方法可创建带有指定命名空间的元素节点。 createElementNS(ns,name) > createElementNS() 方法与 createElement() 方法相似
随着大数据时代的来临,物联网的日益发展,原先的 SCADA 系统本身也在求新求变,从最开始的专业计算机和操作系统,到通用计算机和相关软件,再到现在基于 HTML5 Canvas 的新型组态开发,其应用的范围也从最初的电力
在写下合格粒子运动时要先清楚你的思路,不能一开始就盲目的开始写,首先先要确定思路然后在去一步步的实现,在写的过程要注意细节,要思考js有些知识是跟数学知识相关的要注意观察
canvas 画的圆不是圆,是椭圆。不要在style里指定 Canvas 的宽度,Canvas 画布的尺寸的大小和显示的大小是有很大的区别的,在 canvas 里面设置的是才是 Canvas 本身的大小。不要企图通过闭合现有路径来开始一条新路径
由于一些移动端的兼容性原因,我们某个项目需要前端将pdf转换成在移动端页面可直接观看的界面。为了方便解决,我们采用了pdf.js这个插件,该插件可以将pdf转换成canvas绘制在页面上
熟悉 canvas 的朋友想必都使用或者听说过 Fabric.js,Fabric 算是一个元老级的 canvas 库了,从第一个版本发布到现在,已经有 8 年时间了。我近一年时间也在项目中使用,作为用户简单说说感受:
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!