canvas学习之API整理笔记(一)


Posted in Javascript onDecember 29, 2016

其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结。但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了。我也有这种感觉,在学习的过程中,编写实例,用到了其中很多的属性和方法,但是回头来看的时候总觉得什么也没用。所以决定系统性的记录一下它常用到的API,方便以后查阅,也顺便造福一下大家。

开始之前

假设html代码中有一个canvas标签:

<canvas id="canvas">你的浏览器不支持canvas!</canvas>

如果你的浏览器是IE8及以下,那么很遗憾,上面那段文字会被渲染出来!而且下面的方法也都不能使用了;所以请使用支持canvas的浏览器来使用后面的方法。

//获取canvas容器
var can = document.getElementById(‘canvas');
//创建一个画布
var ctx = can.getContext(‘2d');

另外我们可以还可以得到容器的宽和高度

var canWid = can.width; //canvas 的宽度
var canHei = can.height; //canvas 的高度

canvas只是一个容器,本身没有绘制的能力,所以我们要得到一个画布ctx,使之具有绘制各种图形的能力。下文所有的方法都是ctx的方法。

绘制

绘制一个矩形:

//填充矩形(x, y是横纵坐标,原点在canvas的左上角)
ctx.fillRect(x, y, width, height);
//边框矩形,默认1px 黑色。 
ctx.strokeRect(x, y, width, height);
//清除指定的矩形区域,变为透明
ctx.clearRect(x, y, width, height); //绘制动态效果时,常用来清除整个画布

绘制路径:

//新建路径,beginPath是绘制新图形的开始
ctx.beginPath()
//路径(线)的起点,一般在上面这条命令后执行
ctx.moveTo(x, y) 
//线的终点
ctx.lineTo(x, y) 
//绘制圆形
ctx.arc(x, y, r, start, end, true/false) //x, y圆心,r半径,start和end是开始和结束角度,false表示顺时针(默认),true表示逆时针。
//绘制弧线
ctx.arcTo(x1, y1, x2, y2, r); //当前端点、(x1,y1)和(x2,y2)这三个点连成的弧线,r是半径。
//闭合路径,不是必须的,如果线的终点跟起点一样,会自动闭合。
ctx.closePath()
//通过线条绘制轮廓(边框)
ctx.stroke() 
//通过路径填充区域(实心)
ctx.fill()

说明:

  1. fill()和stroke()函数表示绘图结束。如果要继续绘制,需要重新新建路径(beginPath())。
  2. 如果lineTo()最后的路径没有封闭,fill()函数会自动封闭路径,而stroke()函数不会。

例:绘制一个三角形

ctx.beginPath();
ctx.moveTo(75, 50); //路径起点
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill(); //自动将路径闭合,并默认填充黑色。

样式

颜色

ctx.fillStyle = 'red' //针对fill()有效的颜色,还可以取值:'#fff'、'rgba(0, 0, 0, 0.5)'等。
ctx.strokeStyle = 'red' //针对stroke()有效的颜色,取值同上。
ctx.globalAlpha = 0.5; //透明度

线段端点

ctx.lineWidth = 2; //线条宽度
ctx.lineCap = 'butt(默认)'、'round(圆弧)'、'square(方形)' //线段端点显示的样式
var ctx = document.getElementById('canvas').getContext('2d');
var lineCap = ['butt','round','square'];
ctx.strokeStyle = 'black';
for (var i=0;i<lineCap.length;i++){
 ctx.lineWidth = 15;
 ctx.lineCap = lineCap[i];
 ctx.beginPath();
 ctx.moveTo(25+i*50,10);
 ctx.lineTo(25+i*50,140);
 ctx.stroke();
}

效果如下图:

canvas学习之API整理笔记(一)

线段连接处

ctx.lineJoin = 'miter(默认)'、round(圆角)、`bevel(横线)`   //两线段连接处所显示的样子

var ctx = document.getElementById('canvas').getContext('2d');
var lineJoin = ['round','bevel','miter'];
ctx.lineWidth = 10;
for (var i=0;i<lineJoin.length;i++){
 ctx.lineJoin = lineJoin[i];
 ctx.beginPath();
 ctx.moveTo(10,50+i*40);
 ctx.lineTo(50,10+i*40);
 ctx.lineTo(90,50+i*40);
 ctx.lineTo(130,10+i*40);
 ctx.lineTo(170,50+i*40);
 ctx.stroke();
}

效果如下图:

canvas学习之API整理笔记(一)

虚线

ctx.setLineDash([4, 2]) //设置虚线,参数为数组,第一个值为实现宽度,第二个值为空白的宽度
ctx.lineDashOffset = 0; //虚线起始偏移量
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var offset = 0;
function draw() {
 offset++; 
 if (offset > 16) { 
 offset = 0; 
 }
 ctx.clearRect(0,0, can.width, can.height); 
 ctx.setLineDash([6, 2]); 
 ctx.lineDashOffset = -offset; 
 ctx.strokeRect(10,10, 100, 100);
}
setInterval(draw, 20);

效果如下图:

canvas学习之API整理笔记(一)

渐变

var bg = ctx.createLinearGradient(x1, y1, x2, y2); //定义线性渐变,渐变的起点 (x1,y1) 与终点 (x2,y2)。
var bg1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 100); //定义径向渐变
bg.addColorStop(0, 'red'); //定义好,之后开始上色
bg.addColorStop(0.5, 'blue');
bg.addColorStop(1, 'rgba(0, 0, 0, 0.6)');
var bg = ctx.createLinearGradient(0, 0, 0, 200); //线性渐变
bg.addColorStop(0, 'black');
bg.addColorStop(0.6, '#fff');
ctx.fillStyle = bg;
ctx.fillRect(10, 10, 100, 100);

效果如下图:

canvas学习之API整理笔记(一)

var bg1 = ctx.createRadialGradient(100, 100, 0, 100, 100, 50); //径向渐变
bg1.addColorStop(0, '#FF5F98');
bg1.addColorStop(0.75, '#FF0188');
bg1.addColorStop(1, 'rgba(255,1,136,0)');
ctx.fillStyle = bg1;
ctx.fillRect(0,0,150,150);

效果如下图:

canvas学习之API整理笔记(一)

文字

var ctx = document.getElementById('canvas').getContext('2d');
ctx.shadowOffsetX = 2; //X轴阴影距离,负值表示往上,正值表示往下
ctx.shadowOffsetY = 2; //Y轴阴影距离,负值表示往左,正值表示往右
ctx.shadowBlur = 2; //阴影的模糊程度
ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; //阴影颜色
ctx.font = "30px Times New Roman"; //设置字体和字体大小
ctx.fillStyle = "Black";
ctx.fillText("Sample String", 15, 30); //实体文字
ctx.strokeStyle = 'red';
ctx.strokeText('Hello world', 15, 100); //边框文字

效果如下图:

canvas学习之API整理笔记(一)

文字的属性出了上面的列出的以外,还有以下一些属性:

ctx.font = '20px Times New Roman';
ctx.textAlign = 'center'; //start, end, left, right or center
ctx.textBaseline = 'middle' //top, hanging, middle, alphabetic, ideographic, bottom
ctx.direction = 'inherit' //ltr, rtl, inherit

图像

var img = new Image();
img.src= './images/background.jpg';
ctx.drawImage(img, 0, 0); //img为图像,(0, 0)为起始坐标

这里的img可以是一个img对象,也可以是一个img元素。

<img id="img" src="./images/background.jpg" style="display:none;">
ctx.drawImage(document.getElementById('img'), 0, 0);

另外,绘制图片的时候还可以对图片进行缩放,类似于css中的background-size:

ctx.drawImage(img, 0, 0, w, h);   //w、h指定图片的宽高,则会同比例缩放。

变形

慢慢的从这里开始,就要开始涉及到复杂的绘制了。而开始复杂的绘制之前,我们得先了解一个概念:canvas绘图的状态。

状态

canvas 的状态就是当前画面应用的所有样式和变形的一个快照。另外,用来操作这个状态的有两个方法:save()和restore()。

save()用来保存当前状态,restore()用来恢复刚才保存的状态。他们都可以多次调用。

ctx.fillStyle = 'black';
ctx.fillRect(20, 20, 150, 150);
ctx.save(); //保存当前状态
ctx.fillStyle= '#fff';
ctx.fillRect(45, 45, 100, 100);
ctx.restore(); //恢复到刚才保存的状态
ctx.fillRect(70, 70, 50, 50);

效果如下图:

canvas学习之API整理笔记(一)

位移(translate)

ctx.translate(x, y);   //更改canvas的原点

var ctx = document.getElementById('canvas').getContext('2d');
for(var i = 1; i< 4; i++) {
 ctx.save(); //使用save方法保存状态,让每次位移时都针对(0,0)移动。
 ctx.translate(100*i, 0);
 ctx.fillRect(0, 50, 50, 50);
 ctx.restore();
}

效果如下图:

canvas学习之API整理笔记(一)

旋转

ctx.rotate(Math.PI * 2)     //参照原点顺时针旋转360度

ctx.translate(75,75); //把原点移动到(75, 75);
for (var i=1; i<6; i++){ // 从里到外一共6圈
 ctx.save();
 ctx.fillStyle = 'rgb('+(50*i)+','+(255-50*i)+',255)';
 for (var j=0; j<i*6; j++){ // 每一圈有i*6个圆点
 ctx.rotate(Math.PI*2/(i*6));
 ctx.beginPath();
 ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
 ctx.fill();
 }
 ctx.restore();
}

效果如下图:

canvas学习之API整理笔记(一)

缩放

ctx.scale(x, y);     //基于原点缩放,x、y是两个轴的缩放倍数

var ctx = document.getElementById('canvas').getContext('2d');
ctx.fillStyle = 'red';
ctx.scale(0.8, 1.2);
ctx.beginPath();
ctx.arc(75, 75, 60, 0, Math.PI * 2);
ctx.fill();

本来绘制的是一个半径为60的圆形,但是经过缩放之后,实际效果如下:

canvas学习之API整理笔记(一)

动画

元素的位置移动,就形成了动画。

一帧一帧的来渲染这个元素,而且这个元素每一帧的位置都不一样,我们的眼睛看到的就是动画了。实现起来也很方便,js提供了两个方法:setTimeout 和setInterval都可以实现,但是一个有逼格的程序员实现动画是不会用这两个方法的,而是用requestAnimationFrame这个方法。有什么区别呢?下面简单做个比较。

  • setInterval(myFun, 10); 意思是隔一毫秒执行一个myFun函数,但是这样就有一个问题了,比如我myFun函数里面绘制的东西比较耗时,而10ms之内还没有完全绘制出来,但是这段代码强制1ms之后又开始绘制下一帧了,所以就会出现丢帧的问题;反之,如果时间设置太长,就会出现画面不流畅、视觉卡顿的问题。
  • requestAnimationFrame(myFun); 如果我们这样写,又是什么意思呢?意思是根据一定的时间间隔,会自动执行myFun函数来进行绘制。这个”一定的时间间隔”就是根据浏览器的性能或者网速快慢来决定了,总之,它会保证你绘制完这一帧,才会绘制下一帧,保证性能的同时,也保证动画的流畅。

结语

这些API已经包含了大部分常用的了,结合requestAnimationFrame函数已经可以绘制很多酷炫的效果了。但是光看这些API很简单,但是想要在绘制游戏或者动画中用起来得心应手还需要看大量的实例,自己实践总结的。

本文就到这里,感谢各位看官~

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
window.name代替cookie的实现代码
Nov 28 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 #Javascript
jQuery自定义插件详解及实例代码
Dec 29 #Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 #Javascript
JavaScript获取短信验证码(周期性)
Dec 29 #Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 #Javascript
Javascript 对cookie操作详解及实例
Dec 29 #Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 #Javascript
You might like
php mssql 时间格式问题
2009/01/13 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
当鼠标移动到图片上时跟随鼠标显示放大的图片效果
2013/06/06 Javascript
JavaScript限定图片显示大小的方法
2015/03/11 Javascript
jQuery中show与hide方法用法示例
2016/09/16 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
python的id()函数解密过程
2012/12/25 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
Python开发的HTTP库requests详解
2017/08/29 Python
numpy使用fromstring创建矩阵的实例
2018/06/15 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
python3使用print打印带颜色的字符串代码实例
2019/08/22 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
Python操作Excel的学习笔记
2021/02/18 Python
儿子婚宴答谢词
2014/01/09 职场文书
观看信仰心得体会
2014/09/04 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
2015年公司后勤管理工作总结
2015/05/13 职场文书
纪检监察立案决定书
2015/06/24 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
图解上海144收音机
2021/04/22 无线电
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
Python函数中apply、map、applymap的区别
2021/11/27 Python