Canvas 大师之路
来源:互联网 发布:微信爆粉引流加人软件 编辑:程序博客网 时间:2024/04/29 07:34
canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面.
因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的经验和样例分享出来,两个目的
- 给自己做笔记,以后忘的时候可以随时看
- 充实自己的博客.
canvas基本的语法都比较简单,我这里就不再介绍,主要通过一些由简到繁的例子来深入学习canvas.
我所有的代码都会托管到github
我的开发环境是VSCode,我很喜欢VSCode.
下面进入正题
第一个例子:
01.html
<canvas width="300" height="300" id="01"> <!--当浏览器不支持canvas,会当做一个div标签,那么就会显示下面的文本--> 不支持canvas </canvas>
01.js
window.onload = () => { // 1.拿到画布 var canvas = document.getElementById('01'); // 2.拿到上下文 var ctx = canvas.getContext("2d"); // 3.绘制 ctx.moveTo(100,100); ctx.lineTo(200,100); ctx.lineTo(100,200); ctx.closePath();// 关闭路径 ctx.strokeStyle='skyblue'; ctx.fillStyle = 'green'; ctx.lineWidth=4; ctx.stroke(); ctx.fill();}
主要介绍3个方法
- closePath: 封闭路径,当一个路劲开始,调用这个方法,就会连一条直线把路劲闭合,当路劲已经是闭合的时候,这个方法不会产生影响.
- stroke() 绘制线条,strokeStyle用于为绘制线条设置颜色
- fill() 填充区域 fillStyle用于设置填充的颜色
注意,填充的时候,线条的宽度为4,里面为2,外面为2,所以我们看到的边框宽度只是2
下面是效果:
第一个例子完成,下面开始第二个例子,绘制表格.
从这里开始,我只会附上js代码,html代码里面只是一个canvas节点.
02drawTable.js
window.onload = function () { var table = document.getElementById('table'), context = table.getContext('2d'); // 绘制表格 var width = 400, height = 400; for (var i = 0; i <= width; i = i + 40) { context.moveTo(i, 1); context.lineTo(i, height); context.stroke(); } for (var i = 0; i <= height; i = i + 40) { context.moveTo(1, i); context.lineTo(width, i); context.stroke(); }};
这个代码看起来更简单了.
首先,我是画横线,注意: 没开始画一条横线,就需要把将画笔定位到起点,画完一条线,画笔就会定位到横线的重点. 画完横线,然后话竖线.
下面是效果
下面开始第三个例子,绘制饼图(这只是一个基本的饼图.之后我会绘制一个动态的饼,让人有吃的欲望)
var arr = [ 0.4, 0.3, 0.1, 0.2,];var pie = document.getElementById('pie');var ctx = pie.getContext('2d');ctx.moveTo(250, 250);var startAngle = -Math.PI / 2;var endAngle = startAngle;for (var i = 0, length = arr.length; i < length; i++) { ctx.beginPath(); ctx.moveTo(250, 250); ctx.fillStyle = "pink skyblue orange yellow".split(" ")[i]; var angle = arr[i]; * 2 * Math.PI; endAngle +=angle; ctx.arc(250, 250, 100, startAngle, endAngle); startAngle = endAngle; ctx.closePath(); ctx.fill();}
这个图就有一点复杂了,但是相信看完一定会明白.
这里涉及到一个重要的api:
arc(x, y, radius, startAngle, endAngle, anticlockwise)// 画一个以(x,y)为圆心的以radius为半径的圆弧(圆),从startAngle开始到endAngle结束,按照anticlockwise给定的方向(默认为顺时针)来生成
开始,我设定canvas的宽和高都为500,所以圆心250 刚好是饼图的中心,然后绘制圆弧,每绘制一次,就闭合一次路劲并填充一个颜色,然后把结束角度设置为开始角度.
注意: canvas里面默认的0度是三点钟方向,就是x轴正方向. 所以我这是我的开始角度为-Math.PI/2 也就是y轴正方向.
下面是效果
基本的图形还包括句型.贝塞尔曲线,不会一一讲解,但是下面肯定会用到.
下面我开始使用一些样式以达到视觉效果.
05pattern.js
var ctx = document.getElementById('pattern').getContext('2d');var width = 9, height = 9, step = 15;for (var i = 0; i < width; i++) { for (var j = 0; j < height; j++) { ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + Math.floor(255-42.5*j) + ',0)'; ctx.fillRect(i*step,j*step,step,step); }}
在一个大矩形里绘制很多小矩形,然后利用i和j更换颜色和位置,成为一个调色板.
下面的一个与上面类似,但是不是矩形,而是圆.
06pattern.js
var ctx = document.getElementById('pattern').getContext('2d');var width = 6, height = 6, step = 20;for (var i = 0; i <= width; i++) { for (var j = 0; j <= height; j++) { ctx.beginPath(); ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ')'; ctx.arc(i * (step + 5) + step / 2, j * (step + 5) + step / 2, step / 2, 0, 2 * Math.PI); ctx.stroke(); }}
这里右引出一个新的api:
beginPath() 用于建立一条新路径,会原型继承自之前的样式,如果它设置了新的样式,那么就会覆盖.
'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ')';
这段代码时抄来的,主要是有一个比较好看的视觉效果.
+5 主要是为了在两个圆心之间留一定的间隔.
查看效果
很炫吧.
关于canvas初级就介绍到这里,下来canvas学习(二)会介绍面向对象封装,用来做一些比较复杂的图形。
现在开始绘制图片和动画帧,以及面向对象的升级版本.
还是一样,看代码,所有的代码都托管在github上
先看第一个例子,绘制一张图片
01-绘制图片.htm
<body> <canvas id="img" height="400" width="400"></canvas> <script src="01绘制图片.js"></script></body>
这里的图片源有以下方式
在页面中添加一个image标签,然后通过document.getElementById() 的方式来拿到
通过new Image().src = ...; 通过这种方法来拿到.
在这里,我使用第二种方法,我的图片放在了img文件夹下.
- HTMLCanvasElement
可以使用另一个canvas元素作为你的图片源。
- ImageBitmap
这是一个高性能的位图,可以低延迟地绘制,它可以从上述的所有源以及其它几种源中生成。
01绘制图片.js
var ctx = document.getElementById('img').getContext('2d');var img = new Image();img.src = './img/0.jpg';img.onload = function () { ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width, img.height);}
美腻吧
在给img对象赋值了src 属性的时候,浏览器会立即开始加载图片,只有当图片加载完毕的时候,我们才能开始绘制图片,所以使用了img.onload = functioin(){...}; 的方式
context.drawImage()有三种方法,下面开始介绍
- drawImage(image, x, y)
其中
image
是 image 或者 canvas 对象,x
和y 是其在目标 canvas 里的起始坐标。
这里就会按照原生图片进行绘制,不会进行缩放或者裁剪
- drawImage(image, x, y, width, height)
这个方法多了2个参数:
width
和height,
这两个参数用来控制 当像canvas画入时应该缩放的大小.由于我们在画图的时候,希望图片应该按照原比例来呈现.所以就想在页面中写入img标签一样,我们通常情况下只是放入一个参数,然后使用公式计算另一个参数.
由于要求
width/height==originWidth/originHeight
故
height=width/originWidth*originHeight
使用这个公式用宽度来计算高度就可以很按照源比例绘制, 当然如果你想把脸瘦下来,那就另说了.....
- drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
drawImage
方法的第三个也是最后一个变种有8个新参数,用于控制做切片显示的。第一个参数和其它的是相同的,都是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照下面的图解,前4个是定义图像源的切片位置和大小,后4个则是定义切片的目标显示位置和大小
这个方法主要是用来做切图的,下面我们做的活动精灵刚好就用到了它.
移动精灵
这是我要用到的素材.
可以看到,它就是很多很多的小图片组合在一起,那么要使它动起来的方式就很简单了.
在画布上不停绘制每一行的小图形,当绘制一个时,就清除前面一个的痕迹.
下面是代码
02移动精灵.html
<article> <canvas height="200" width="400" id="genius"></canvas> <div> <button id="forward">forward</button> <button id="right"> right</button> <button id="back">back</button> <button id="left">left</button> </div> </article> <script src="02移动精灵.js"></script>
我放置了一个canvas画布和4个按钮,让他前后左右动.
02移动精灵.js
var ctx = document.getElementById('genius').getContext('2d');var img = new Image();var intervalId;var draw = function (direction) { var rowIndex = direction, // 当前是第几行的图片 columnIndex = 0, // 当前是第几列的图片 frame = 6, // 一秒有几帧 singleWidth = 40, // 每一个小图片的宽度 singleHeight = 65; // 每一个小图片的高度 window.clearInterval(intervalId); intervalId = setInterval(function () { // 在没绘制一张小图片之前,都要清空之前绘制的图片,这样才能显示出动画效果来, ctx.clearRect(10, 10, singleWidth, singleHeight); // 在大图上剪切绘制绘制 ctx.drawImage(img, columnIndex * singleWidth, rowIndex * singleHeight, singleWidth, singleHeight, 10, 10, singleWidth, singleHeight); columnIndex++; columnIndex %= 4; }, 1000 / frame);}
这里draw函数里防止了主要的代码,通过计时器来使图片动起来(注意不要使用循环)
注意在每一次移动方向后都要清除计时器,
columnIndex %= 4;columnIndex++; 这两句是常用的循环控制语句.
02移动精灵.js
onload = function () { img.src = "./img/DMMban.png"; img.onload = function () { // 用数字表示这个精灵移动的方向. // forward: 0,left:1,right:2,back:3 draw(0); } document.querySelector('#forward').addEventListener('click', () => { draw(0); }); document.querySelector('#left').addEventListener('click', () => { draw(1); }); document.querySelector('#right').addEventListener('click', () => { draw(2); }); document.querySelector('#back').addEventListener('click', () => { draw(3); });};
下面是效果图.
这个精灵并不是很好看,不过因为我不是做动画的,找不到比较漂亮的素材,将就看吧...
面向对象版本
好了,这个列子相对于第一篇文章例子要复杂一点,所以我也做了一个面向对象的版本,使用到了原型继承和一些其他的知识点.(关于原型继承和JavaScript面向对象在这里有介绍: JavaScript面向对象高级(一)
注意封装对象的方式,我个人认为这样封装对象时非常好的. 这也是很多大牛推荐的.在我的JavaScript高级框架设计部分将会介绍jQuery对象封装的方式.
01-移动精灵-面向对象版本.htm
<body> <article> <canvas height="200" width="400" id="genius"></canvas> <div> <button id="forward">forward</button> <button id="right"> right</button> <button id="back">back</button> <button id="left">left</button> </div> </article> <script src="01-移动精灵-面向对象版本.js"></script></body>
01-移动精灵-面向对象版本.js
- Genius 类的封装
var Genius = function (option) { Genius.prototype._init_(option);}Genius.prototype = { constructor: Genius, // 把对象的初始化代码都放在这里,把它需要用到的所有变量都绑定到它的原型上. _init_: function (option) { this.img = option.img; this.rowIndex = option.rowIndex; this.columnIndex = option.columnIndex; this.frame = option.frame; this.singleWidth = option.singleWidth; this.singleHeight = option.singleHeight }, // 由于js面向对象的特点,获取会从父对象的prorotype里面获取,但是设置只会设置自己的 draw: function (ctx, direction) { window.clearInterval(this.intervalId); this.rowIndex = direction; // 一定要设置,因为在setInterval里面,this指的就是window变量 var that = this; this.intervalId = setInterval(function () { // 在没绘制一张小图片之前,都要清空之前绘制的图片,这样才能显示出动画效果来, ctx.clearRect(10, 10, that.singleWidth, that.singleHeight); // 在大图上剪切绘制绘制 ctx.drawImage(that.img, that.columnIndex * that.singleWidth, that.rowIndex * that.singleHeight, that.singleWidth, that.singleHeight, 10, 10, that.singleWidth, that.singleHeight); that.columnIndex++; that.columnIndex %= 4; }, 1000 / that.frame); }}
window.onload = function () { var ctx = document.getElementById('genius').getContext('2d'); var oringinImg = new Image(); oringinImg.src = "./img/DMMban.png"; var genius; oringinImg.onload = function () { // 实例化构造一个对象 genius = new Genius({ img: oringinImg, rowIndex: 0, columnIndex: 0, frame: 6, singleWidth: 40, singleHeight: 65 }); // 调用Genius的prototype里面的draw方法. genius.draw(ctx, 0); } document.querySelector('#forward').addEventListener('click', () => { genius.draw(ctx, 0); }); document.querySelector('#left').addEventListener('click', () => { genius.draw(ctx, 1); }); document.querySelector('#right').addEventListener('click', () => { genius.draw(ctx, 2); }); document.querySelector('#back').addEventListener('click', () => { genius.draw(ctx, 3); });};
这是效果图
嗯 canvas绘制动画帧就到这里,下一篇Canvas(三) konva 将会介绍canvas的旋转和konva库.
由于本人水平有限,如有错误,如果错误,望不吝赐教.
- Canvas 大师之路
- 《大师之路》
- 大师之路
- 走向大师之路
- Adobe Flex大师之路
- 飞行教程大师之路
- 赵鹏的《大师之路》教程
- 大师之路Photoshop教程电子版2.0
- 我的Photoshop大师之路(一)
- 我的Photoshop大师之路(二)
- 我的Photoshop大师之路(三)
- 我的Photoshop大师之路(四)
- 我的Photoshop大师之路(五)
- 大师之路:程序员推荐书目
- 成为图论大师之路
- Fiddler大师之路系列(一)
- Fiddler大师之路系列(二)
- Fiddler大师之路系列(三)
- 音视频传输基本知识及总体思路
- Android Settings(Preferences)开发
- 元素入栈、出栈的合法性检测
- js中替换字符串
- hibernate检索的使用
- Canvas 大师之路
- 我的学习日志(1)
- android developer tiny share-20160725
- unique和unique_copy
- 求教ORACLE中sysdate和current_timestamp的区别?
- Android优秀开源项目(分类 便于查看)
- 首单美国官方批准无人机快递成功送达 包裹里全是食物
- 使用UIImagePickerController时出现警告Assigning to ‘id<UINavigationControllerDelegate,UIImagePickerControl>
- 在Java中如何遍历Map对象