canvas学习(一)

Canvas 学习之路 (一)

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学习(二)会介绍面向对象封装,用来做一些比较复杂的图形

 
分类: canvas

canvas1的更多相关文章

  1. HTML5新特性有哪些,你都知道吗

    一.画布(Canvas) 画布是网页中的一块区域,可所以用JavaScript在上面绘图.下面我们来创建一个画布并在上面绘制一个坦克(后面将用HTML5做一个坦克大战游戏),代码如下: <!DO ...

  2. HTML5 学习总结(四)——canvas绘图、WebGL、SVG

    一.Canvas canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3D图像技术.<canvas> 标记和 ...

  3. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  4. Canvas设置width与height 的问题!

    最近因为工作需要,所以就学了一下Html中的Canvas标签. 当我看了一下教程后,自己写了一个hello world的时候,麻烦事就出现了.看下面代码: <!DOCTYPE html> ...

  5. js通过循环多张图片实现动画效果

    以小鱼摇尾巴和眨眼睛为例 动画思路: 1.将图片资源放在数组里面 2.通过计时器来设定间隔时间 3.通过计数器来取相应的图片 第一步:基本框架,鱼身体 <body> <canvas ...

  6. 网页万能排版布局插件,web视图定位布局创意技术演示页

    html万能排版布局插件,是不是感觉很强大,原理其实很简单,不过功能很强大哈哈,大量节省排版布局时间啊! test.html <!doctype html> <html> &l ...

  7. Android使用C++截屏并显示

    使用android底层自带的截屏源码进行修改后,将截取屏幕的内容再次显示在屏幕上,使屏幕呈现出暂停的效果. android自带的截屏代码在android\JB\frameworks\base\cmds ...

  8. 10个最常见的 HTML5 面试题及答案

    这是选择了10个 HTML5 面试问题并给出了答案.这是 Web 开发人员最常见的面试问题,相信你掌握了这些重要的面试问题后一定会觉得你的理解提高了.一起来看看吧. 您可能感兴趣的相关文章 Web 前 ...

  9. canvas简介

    一.canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆 ...

随机推荐

  1. MVC 使用PageList进行分页

    1.新建MVC项目 2.在Web项目下添加PagedList nuget 命令 :install-package pagedlist.mvc 在安装完成之后,会在Content下添加PagedList ...

  2. Spring-----1、Spring简介和Spring3.0的变化

    转载自:http://blog.csdn.net/hekewangzi/article/details/41324441

  3. python基础之python中if __name__ == '__main__': 的解析

    当你打开一个.py文件时,经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它的作用. 模块是对象,并且所有的模块都有一个内置属性 __name__.一个 ...

  4. zoj1093 Monkey and Banana

    写到现在,发现1025,1076之前写的都是同一种题型:关于DAG的最长路(最短路). 首先要建立模型,根据关系,确定点和点之间的关系,构成一个DAG,前面几道题每个点之间距离默认为1,这一道题不同点 ...

  5. Java文件IO操作应该抛弃File拥抱Path和Files

    Java7中文件IO发生了很大的变化,专门引入了很多新的类: import java.nio.file.DirectoryStream;import java.nio.file.FileSystem; ...

  6. html5 Canvas处理图像 实例讲解

    最近在学习canvas,canvas有很强大的图像处理功能,下面写一个我的学习总结: canvas常用功能: 1. 绘制矩形.圆形.曲线.组合图形 2. 绘制文本 3.绘制渐变.变形的图形 4. 图片 ...

  7. win7下设置 WiFi AP

    开启windows 7的隐藏功能:虚拟WiFi和SoftAP(即虚拟无线AP),就可以让计算机变成无线路由器.实现共享上网. 1.以管理员身份运行命令提示符: “开始”---在搜索栏输入“cmd”-- ...

  8. 初探ListView和Adapter

    关于Android Adapter(适配器),参考Devin Zhang’s blog.简单的说,Adapter起到的作用是使得前端的显示和后端的数据能够适配,用以下代码作为例子 1234567891 ...

  9. Spring、使用注解方式装配对象(@Resource、@Autowired)

    使用手工注解方式有两种方式@Resource.@Autowired 首先,引入注解所使用的Jar包  :common-annotations.jar 然后在beans.xml中加入命名空间空间 xml ...

  10. Hibernate 、多表关联映射-组件关联映射(component)

    组件关联映射可以将一些简小的数据与主题放在一个表中,例如firstName 和LastName这两个结合在一起可以组成一个名字,但是再分别将这两个再建一个表就不太合适了,这个时候可以用到组件关联映射: ...