- 浏览: 50617 次
- 性别:
- 来自: 广州
文章分类
最新评论
包括:
介绍。
基础入门。(兼容性。获取canvas上下文。绘制直线/描边,填充内容。绘制表格。)
canvas是基于状态的绘图。
绘制矩形。
绘制圆形。
绘制文本。
绘制图片。
阴影。
渐变。
绘制背景图。
变换。
介绍:
HTML5的新标签<canvas></canvas>
canvas标签通过JavaScript在网页上绘制图像,本身不具备绘图功能。
canvas拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。
canvas可以做游戏,图表,广告等等。
基础入门。
设置canvas的宽和高是通过canvas标签的属性来设置,不要用css设置。
还可以在JS中通过属性指定。
兼容性。
当浏览器不支持canvas时,在canvas标签内编写提示文字。
(当浏览器支持canvas时,canvas会执行相关JS代码)
获取canvas上下文。
canvas上下文就是绘制工具的集合。
写在canvas标签后,或者window.onload = function(){}
得到canvas上下文后就可以开始绘制了。
canvas的坐标系和浏览器的坐标系一致。都是左上角为(0,0)。
绘制直线/描边,填充内容。
将路径闭合。
还可以使用ctx.closePath()来闭合路径。
都是一样的效果:
修改描边的样式。在stroke()描边之前设置描边样式。
填充内容。默认是黑色。修改填充的样式。
问题:填充后,为什么描边变细?
答案:描边是2像素在里面2像素在外边。填充后,里面的2像素被遮盖住了。
绘制表格。
在这基础上就可以绘制折线图了。
绘制箭头的思路:
绘制数据的思路:
canvas是基于状态的绘图。
比如绘制两条不同颜色的直线。
问题:两条线颜色为什么一样?
解决方法:canvas是基于状态的绘图。设置ctx.beginPath()即可。
beginPath()相当于开启新状态。
绘制第一条线的时候也可以beginPath(),默认一开始就有状态。
绘制第二条线的新状态,可以继承之前的状态的样式,但是当前的状态设置的所有样式,只能作用于当前的状态。
绘制矩形。
绘制矩形:ctx.rect(x,y,w,h); //左上角坐标(x,y),w宽,h高。
清除矩形:相当于橡皮擦。
ctx.clearRect(x,y,w,h);
绘制圆形。
换算公式:rad = deg*Math.PI/180;
绘制0-30°的圆弧。
加上closePath()会闭合路径。
如果要连接到圆心点。先moveTo(圆心点)即可。
绘制饼状图的其中一个扇形。
假设有这样一个JSON数据。
将数据变成饼状图。
value代表占比。从-90°开始绘制。
绘制文本。
ctx.strokeText('hello',450,400); //文字,坐标
ctx.fillText('hello',150,100);
行高行距的概念:
对齐方式:
饼状图的文字。假设,在角度的一半绘制一条直线出来,写上XX%,思路如图。
绘制完饼状图后,fill前。绘制文字。
文字会超过:
文字不会超过:
绘制图片:
以上的img和以下的方法获得的img是一样的,都是dom对象。
恶搞✧(≖ ◡ ≖✿)
还可以设置宽高,不设置的时候是图片的默认宽高。
被拉伸:
如果要保持宽高比,则 原来的高度 / 原来的宽度 = 绘制的高度 / 绘制的宽度 。
假设已知绘制的宽度,则绘制的高度为 原来的高度*绘制的宽度/原来的宽度。
绘制图片裁剪区域。
比如:网上找的一张图:截取出第一个人物:
逐帧动画/序列帧动画:定时器。
先做第一行的动作。
添加四个方向的按钮。
在绘制图片前(new Image()前)。设置方向。相当于图片的第一行。代表向下走。
然后将截取的y坐标改为dirIndex*92.75,绑定相关的按钮事件。
点击效果:
阴影
渐变
绘制背景图
变换
例子:
介绍。
基础入门。(兼容性。获取canvas上下文。绘制直线/描边,填充内容。绘制表格。)
canvas是基于状态的绘图。
绘制矩形。
绘制圆形。
绘制文本。
绘制图片。
阴影。
渐变。
绘制背景图。
变换。
介绍:
HTML5的新标签<canvas></canvas>
canvas标签通过JavaScript在网页上绘制图像,本身不具备绘图功能。
canvas拥有多种绘制路径,矩形,圆形,字符以及添加图像的方法。
canvas可以做游戏,图表,广告等等。
基础入门。
设置canvas的宽和高是通过canvas标签的属性来设置,不要用css设置。
<canvas id="canvas" width="400" height="400"></canvas>
还可以在JS中通过属性指定。
var canvas = document.getElementById('canvas'); //获取canvas标签 canvas.width=400; canvas.height=400;
兼容性。
当浏览器不支持canvas时,在canvas标签内编写提示文字。
<canvas>你的浏览器不支持canvas,请更换浏览器后再试。</canvas>
(当浏览器支持canvas时,canvas会执行相关JS代码)
获取canvas上下文。
canvas上下文就是绘制工具的集合。
写在canvas标签后,或者window.onload = function(){}
var canvas = document.getElementById('canvas'); //获取canvas标签 var ctx= canvas.getContext('2d'); //获取canvas的上下文 3D=>'webgl'
得到canvas上下文后就可以开始绘制了。
canvas的坐标系和浏览器的坐标系一致。都是左上角为(0,0)。
绘制直线/描边,填充内容。
ctx.moveTo(100,100); //画笔移动到(100,100) ctx.lineTo(200,100); //画一条直线到(200,100) ctx.lineTo(100,200); //画一条直线到(100,200) //到此为止,只绘制了路径,还没描线。 ctx.stroke(); //描线。
将路径闭合。
ctx.moveTo(100,100); //画笔移动到(100,100) ctx.lineTo(200,100); //画一条直线到(200,100) ctx.lineTo(100,200); //画一条直线到(100,200) ctx.lineTo(100,100); //画一条直线到(100,100) ctx.stroke(); //描线。
还可以使用ctx.closePath()来闭合路径。
ctx.moveTo(100,100); //画笔移动到(100,100) //必须要写moveTo(),否则画笔没有位置。 //没有写moveTo()直接写lineTo()的话,画笔的位置直接到lineTo()的位置,相当于moveTo() ctx.lineTo(200,100); //画一条直线到(200,100) ctx.lineTo(100,200); //画一条直线到(100,200) ctx.closePath() //闭合路径 ctx.stroke(); //描线。
都是一样的效果:
修改描边的样式。在stroke()描边之前设置描边样式。
ctx.lineWidth = 4; //线宽 ctx.strokeStyle = 'red'; //颜色
填充内容。默认是黑色。修改填充的样式。
ctx.fill(); ctx.fillStyle = 'blue'; //颜色
问题:填充后,为什么描边变细?
答案:描边是2像素在里面2像素在外边。填充后,里面的2像素被遮盖住了。
绘制表格。
var rectH = 10; //行高 var rectW = 10; //列宽 //绘制横线: for(var i = 0;i< canvas.width / rectH;i++){ ctx.moveTo(0,i*rectH); ctx.lineTo(canvas.width,i*rectH); //绘制竖线 for(var j = 0;j<canvas.height / rectW;j++){ ctx.moveTo(j*rectW,0); ctx.lineTo(j*rectW,canvas.height); } } ctx.lineWidth = 0.5; ctx.strokeStyle = '#ccc'; ctx.stroke();
在这基础上就可以绘制折线图了。
绘制箭头的思路:
绘制数据的思路:
var x0 = 100,y0 = 500; var maxHeight = 300; var arrowWidth = 10;// 箭头宽度 // 绘制x轴 ctx.beginPath(); ctx.strokeStyle = "blue"; ctx.moveTo(x0, y0); ctx.lineTo(500, 500); // 箭头 ctx.lineTo(500-arrowWidth, 500-arrowWidth); ctx.moveTo(500, 500); ctx.lineTo(500-arrowWidth, 500+arrowWidth); ctx.stroke(); //绘制y轴 ctx.beginPath(); ctx.strokeStyle = "purple"; ctx.moveTo(x0, y0); ctx.lineTo(100, 100); // 箭头 ctx.lineTo(100-arrowWidth, 100+arrowWidth); ctx.moveTo(100, 100); ctx.lineTo(100+arrowWidth, 100+arrowWidth); ctx.stroke(); // 绘制线段 var data = [.4 ,.5 ,.8 ,.7]; var pointWidth = 400 / (data.length + 1); ctx.beginPath(); ctx.strokeStyle = "red"; for(var i=0;i<data.length;i++){ var x =x0 +(i + 1) * pointWidth; var y =y0 - data[i] * maxHeight; ctx.lineTo(x, y); } ctx.stroke();
canvas是基于状态的绘图。
比如绘制两条不同颜色的直线。
ctx.strokeStyle = 'red'; ctx.lineWidth=5; //第一条线 ctx.moveTo(100,100); ctx.lineTo(300,100); ctx.stroke(); //第二条线 ctx.strokeStyle = 'blue'; ctx.moveTo(100,200); ctx.lineTo(300,200); ctx.stroke();
问题:两条线颜色为什么一样?
解决方法:canvas是基于状态的绘图。设置ctx.beginPath()即可。
//第二条线 ctx.beginPath(); ctx.strokeStyle = 'blue'; ctx.moveTo(100,200); ctx.lineTo(300,200); ctx.stroke();
beginPath()相当于开启新状态。
绘制第一条线的时候也可以beginPath(),默认一开始就有状态。
绘制第二条线的新状态,可以继承之前的状态的样式,但是当前的状态设置的所有样式,只能作用于当前的状态。
绘制矩形。
绘制矩形:ctx.rect(x,y,w,h); //左上角坐标(x,y),w宽,h高。
ctx.rect(50,50,50,50); ctx.stroke(); ctx.strokeRect(120,120,50,50); //和上面写法的效果一致。 ctx.fillRect(190,190,50,50); //如果是fill(填充),会自动闭合路径。
清除矩形:相当于橡皮擦。
ctx.clearRect(x,y,w,h);
ctx.clearRect(195,195,30,30);
绘制圆形。
ctx.arc(x,y,r,startAngle,endAngle,counterclockwise); //圆心坐标(x,y),半径r,开始弧度,结束弧度,顺时针/逆时针(默认顺时针如图)
换算公式:rad = deg*Math.PI/180;
绘制0-30°的圆弧。
ctx.arc(100,100,100,0,30*Math.PI/180,false);
加上closePath()会闭合路径。
如果要连接到圆心点。先moveTo(圆心点)即可。
ctx.moveTo(100,100) ctx.arc(100,100,100,0,30*Math.PI/180,false); ctx.closePath(); ctx.stroke();
绘制饼状图的其中一个扇形。
ctx.moveTo(200,200); ctx.fillStyle = 'red' ctx.arc(200,200,100,-90*Math.PI/180,-30*Math.PI/180,false); ctx.fill()
假设有这样一个JSON数据。
var data =[{ "value":.2, "color":"red", "title":"应届生" },{ "value":.3, "color":"blue", "title":"社会招生" },{ "value":.4, "color":"green", "title":"推荐" },{ "value":.1, "color":"yellow", "title":"公开课" }];
将数据变成饼状图。
value代表占比。从-90°开始绘制。
//先画扇形。 var tempAngle = -90; //从-90度开始 var x0 = 150,y0 = 150,radius = 100; //圆心和半径 for(var i=0;i<data.length;i++){ ctx.beginPath(); ctx.moveTo(x0,y0); //圆心 var angle = data[i].value*360; //当前扇形的角度 ctx.fillStyle = data[i].color; var startAngle = tempAngle * Math.PI/180; //开始角度 var endAngle = (tempAngle + angle) * Math.PI/180; //结束角度 ctx.arc(x0,y0,radius,startAngle,endAngle) ctx.fill(); tempAngle+=angle; }
绘制文本。
ctx.strokeText('hello',450,400); //文字,坐标
ctx.fillText('hello',150,100);
ctx.moveTo(300,300); ctx.fillStyle = 'purple'; ctx.font = '20px 微软雅黑'; ctx.textBaseline = "bottom"; //基线 ctx.textAlign = "left"; // ctx.strokeText('hello',450,400); //空心文字 ctx.fillText('hello',100,300); //实体填充文字
行高行距的概念:
对齐方式:
饼状图的文字。假设,在角度的一半绘制一条直线出来,写上XX%,思路如图。
绘制完饼状图后,fill前。绘制文字。
// 绘制文字 var txt = data[i].value * 100 +'%'; var x,y; var textAngle = tempAngle + 1/2 *angle; x=x0+Math.cos(textAngle * Math.PI / 180) * (radius + 20); y=y0+Math.sin(textAngle * Math.PI / 180) * (radius + 20); // 左侧文字太长会越过饼状图。 if(textAngle>90&&textAngle<270){ ctx.textAlign = "end" } ctx.fillText(txt,x,y);
文字会超过:
文字不会超过:
ctx.measureText() //measure测量;返回文本的宽度
绘制图片:
ctx.drawImage(img,x,y); //img是图片的DOM对象。 绘制的坐标。
// 创建图片的dom对象 var img = new Image(); img.src='img.jpg'; //只要设置了src属性,当前img对象立即去加载图片。 img.onload = function(){ // 图片加载完成后,绘制图片 ctx.drawImage(img,100,100); }
以上的img和以下的方法获得的img是一样的,都是dom对象。
var img2 = document.getElementById('imagedemo');
恶搞✧(≖ ◡ ≖✿)
for(var i=0;i<10;i++){ ctx.drawImage(img,100+i*10,100+i*10); }
还可以设置宽高,不设置的时候是图片的默认宽高。
ctx.drawImage(img,x,y,w,h); //w,h,宽高。
ctx.drawImage(img,100,100,50,50);
被拉伸:
如果要保持宽高比,则 原来的高度 / 原来的宽度 = 绘制的高度 / 绘制的宽度 。
假设已知绘制的宽度,则绘制的高度为 原来的高度*绘制的宽度/原来的宽度。
var ow = img.width; var oh = img.height; ctx.drawImage(img,100,100,200,200*oh/ow);
绘制图片裁剪区域。
ctx.drawImage(img,sx,sy,sw,sh,x,y,w,h) //截取的坐标。截取的宽高。绘制的坐标。绘制的宽高。
比如:网上找的一张图:截取出第一个人物:
ctx.drawImage(img,195,26,276,377,100,100,200,300);
逐帧动画/序列帧动画:定时器。
先做第一行的动作。
var frameIndex = 0; //帧数 setInterval(function(){ // 清除之前的内容 ctx.clearRect(0, 0, canvas.width, canvas.height); // 如果通过代码重新设置canvas画布的宽高,canvas画布里的所有内容都被清空。(不建议使用) //canvas.width = canvas.width; ctx.drawImage( img, frameIndex*53.25, //截取的坐标 0, //截取的坐标 53.25, //截取的宽 92.75, //截取的高 200, //绘制的坐标 200, //绘制的坐标 53.25*2, //绘制的宽 92.75*2 //绘制的高 ) frameIndex++; frameIndex%=4; //取余 4%4=0 },1000/10); //1秒10帧。
添加四个方向的按钮。
<button id="btn-left">left</button> <button id="btn-right">right</button> <button id="btn-top">top</button> <button id="btn-down">down</button>
var btnLeft = document.getElementById('btn-left') var btnRight = document.getElementById('btn-right') var btnTop = document.getElementById('btn-top') var btnDown = document.getElementById('btn-down')
在绘制图片前(new Image()前)。设置方向。相当于图片的第一行。代表向下走。
var dirIndex = 0;
然后将截取的y坐标改为dirIndex*92.75,绑定相关的按钮事件。
btnLeft.onclick = function(){ dirIndex =1 ; //第2行 } btnRight.onclick = function(){ dirIndex =2 ; //第3行 } btnTop.onclick = function(){ dirIndex =3 ; //第4行 } btnDown.onclick = function(){ dirIndex =0 ; //第1行 }
点击效果:
阴影
// 设置阴影 ctx.fillStyle = 'red'; ctx.shadowColor = 'teal'; //颜色 ctx.shadowBlur = 10; //模糊 ( 大于1 ) ctx.shadowOffsetX = 10; //偏移 ctx.shadowOffsetY = 10; ctx.fillRect(100,100,100,100);
渐变
// 线性渐变 var grd = ctx.createLinearGradient(0, 0, 170, 0); grd.addColorStop(0,"black"); grd.addColorStop(0.5,"red"); grd.addColorStop(1,'white'); ctx.fillStyle = grd; ctx.fillRect(0, 0, 300, 300);
// 圆形渐变 var rlg = ctx.createRadialGradient(300, 300, 10, 300, 300, 200); rlg.addColorStop(0,"white"); rlg.addColorStop(0.5,"red"); rlg.addColorStop(1,'black'); ctx.fillStyle = rlg; ctx.fillRect(100, 100, 400, 400);
绘制背景图
var pat = ctx.createPattern(img,repeat); //img是DOM对象 ctx.rect(0, 0, 150, 100); ctx.fillStyle = pat; ctx.fill();
变换
ctx.scale(Scale Width, Scale Height); //缩放当前绘图 1为100% ctx.translate(X, Y); //位移画布 ctx.rotate(Rotate Angle); //旋转当前绘图 ctx.save(); //保存当前环境的状态 ctx.restore(); //返回之前保存过的路径状态和属性 ctx.globalAlpha = "Value between 0 & 1"; //绘制环境的透明度
例子:
// 状态1 ctx.fillStyle = "red"; ctx.fillRect(10, 10, 100, 100); ctx.save(); //保存状态 ctx.translate(200, 200); //把当前画布移动到200,200的位置 ctx.rotate(30* Math.PI / 180); //旋转 ctx.scale(2, 2); //缩放 ctx.globalAlpha = ".3"; //透明度 ctx.moveTo(0, 0); ctx.lineTo(400, 0); ctx.moveTo(0, 0); ctx.lineTo(0, 400); ctx.stroke(); ctx.fillRect(10, 10, 40, 40); ctx.restore(); //返回之前保存过的路径状态和属性 ctx.fillRect(400, 400, 100, 100);
发表评论
-
canvas写的地铁地图
2017-03-06 21:06 1986根据的是百度提供的坐标,canvas的坐标是大的坐标在后面,所 ... -
Less的用法
2016-10-31 11:48 526Less常用来写样式,比较多的用法是使用第三方软件编译成CSS ... -
一年及以上经验的前端具备的技术
2016-10-25 15:09 37工作学习之余,在51job,拉勾上搜索了前端这个职位,看了看各 ... -
有关cookie的内容
2016-10-21 13:08 566包括: Cookie概述(Cookie ... -
有关BOM(Browser Object Model)的内容
2016-10-20 17:24 419包括: BOM概述 BOM模型 Window对象(常用属性和方 ... -
JSON的相关内容
2016-10-20 12:38 623包括: JSON概述, JSON语法规则, 使用JSON(JS ... -
定义类或对象
2016-09-07 15:17 410学习总结: 工厂方式 ...
相关推荐
javaFX canvas用法交互的小例子程序 挤压后idea可以打开并运行
wxml-to-canvas 小程序内通过静态模板和样式绘制 canvas ,导出图片,可用于生成分享图等场景
为大家介绍一款JS截图插件html2canvas.js,它可以通过纯JS对浏览器端经行截屏,下面就为大家介绍一下html2canvas.js属性和具体使用方法,并为大家提供了一个实例
Canvas 画几何图形,path 使用方法,通过canvas和path自定义画板
JS用Canvas元素进行HTML绘图 Canvas用法示例
Canvas的经典用法,里面有许多的实例。
canvas是一个可以让我们使用脚本绘图的标签,它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制,图像处理甚至实现简单的动画和游戏制作。 canvas标签只有两个属性:width和height,用来设定画布的宽和高...
主要介绍了HTML5 画布canvas使用方法,canvas 是一个矩形区域,可以控制其每一像素,介绍了canvas的多种功能,感兴趣的小伙伴们可以参考一下
tkinter的canvas基本用法.docx
讲解使用canvas.save()和canvas.restore()的demo
在用canvas将png图片转jpeg时,发现透明区域被填充成黑色。 代码如下: XML/HTML Code复制内容到剪贴板 <p>Canvas: <canvas u00a0id=canvas style></canvas> <p>Base64转码后的图片: ...
HTML canvas中 arcTo()的使用方法,希望对您学习canvas中的arcTo()有所帮助以后还会持续的更新关于网页制作编写上的,希望您能多多支持
android 中canvas的save和resotre用法 测试代码
矩形,矩形圆角(背景色支持线性渐变)文本支持竖排,长文本自动换行支持分组(cax里很好用的一个功能) 支持旋转小程序添加json2canvas组件require:SDKVersion>=2.6.1小程序已经支持使用 npm 安装第三方包,详见 1.npm i...
在实际使用的时候发现其init方法只是将document转换为了canvas,并没有保存为图片这一步。 所以我在此基础上进行了扩展,可以调用我封装的方法传入需要截取的document以及文件名字,直接将document以图片形式自动...
用法: html2canvas(document.body, { allowTaint: true, taintTest: false, onrendered: function(canvas) { canvas.id = "mycanvas"; //document.body.appendChild(canvas); //生成base64图片数据 var ...
vue-html2canvas Html2Canvas的Vue mixin安装npm install vue-html2canvas或yarn添加vue-html2canvas用法main.js从'vue'导入Vue; impor vue-html2canvas Html2Canvas的Vue mixin安装npm install vue-html2canvas或...
HTML5:canvas基本属性与用法介绍
关于canvas 的api文档 主要描述canvas标签的用法