感谢  liuyubobobo 老师 ,提供了这么好的课程

1、<canvas><canvas>标签

    注意:最好在标签中指定canvas的width 和 height 或者用js : canvas.width , canvas.height
    <canvas>如果你的浏览器支持canvas,那么你将看不到这行文字</canvas>
    注意:canvas是基于状态来绘制的。
2、画一条直线:
 var canvas = document.getElementById("line"); //获取画布节点
canvas.width =1366; //设置画布的宽
canvas.height =600; //设置画布的高
if(canvas.getContext){
var ctx = line.getContext("2d");
ctx.moveTo(100,100); //移动到位置(100,100)
ctx.lineTo(500,500); //从位置(100.100)画线到 位置 (500,500)
ctx.lineTo(100,500); //从位置(500,500)画线到 位置 (100,500)
ctx.lineTo(100,100);
ctx.stroke();
}
效果图:
 
修改之前的代码如下:

  var canvas = document.getElementById("line");
canvas.width =1366;
canvas.height =600;
if(canvas.getContext){
  var ctx = line.getContext("2d");
  ctx.beginPath();// 开始一段新的画
  ctx.moveTo(100,100);
  ctx.lineTo(500,500);
  ctx.lineTo(100,500);
10   ctx.lineTo(100,100);
11   ctx.fillStyle ="#6699cc"; //设置填充颜色
  ctx.fill(); //执行填充操作
  ctx.lineWidth =5; //设置线宽
  ctx.strokeStyle ="rgba(0,255,0,.5)"; //设置画线的颜色
  ctx.stroke(); //画线(会基于之前设置的三个 lineTo的坐标位置而依次画图)
ctx.closePath(); //结束这段画
}
效果如下:
 
 
熟练之后可以用下面这段代码画出一个美丽的七巧板:
 var tangram =[
  {p:[{x:100,y:100},{x:300,y:300},{x:500,y:100}],color:'#CAFF67'},
  {p:[{x:100,y:100},{x:300,y:300},{x:100,y:500}],color:'#6699CC'},
  {p:[{x:100,y:500},{x:200,y:400},{x:300,y:500}],color:"pink"},
  {p:[{x:200,y:400},{x:300,y:300},{x:400,y:400},{x:300,y:500}],color:'purple'},
  {p:[{x:300,y:300},{x:400,y:200},{x:400,y:400}],color:'yellow'},
  {p:[{x:400,y:200},{x:500,y:100},{x:500,y:300},{x:400,y:400}],color:'red'},
  {p:[{x:300,y:500},{x:500,y:300},{x:500,y:500}],color:'orange'}
]
window.onload =function(){
  var canvas = document.getElementById("line"),
  i =0;
  canvas.width =1366;
  canvas.height =600;
  if(canvas.getContext){
    var context = canvas.getContext("2d");
    for(i =0;i<tangram.length;i++){
      draw(tangram[i],context)
    }
  }
}
function draw(piece,cxt){
  cxt.beginPath();
  cxt.moveTo(piece.p[0].x,piece.p[0].y);
  var i =1;
  for(;i < piece.p.length;i++){
    cxt.lineTo(piece.p[i].x,piece.p[i].y);
  }
  cxt.closePath();
  cxt.fillStyle=piece.color;
  cxt.fill();
  cxt.fillStyle ="#000000";
  cxt.lineWidth =3;
  cxt.stroke();
}
效果图:
 
 
另外我这里还做了一个Demo,当你输入自己的英文名时,你可以看到圆球跳跃的效果显示你的英文名,由于篇幅,不详说,
效果图:
具体的代码见github: 
 
 

Canvas学习的更多相关文章

  1. canvas学习之API整理笔记(二)

    前面我整理过一篇文章canvas学习之API整理笔记(一),从这篇文章我们已经可以基本了解到常用绘图的API.简单的变换和动画.而本篇文章的主要内容包括高级动画.像素操作.性能优化等知识点,讲解每个知 ...

  2. canvas学习(一)

    Canvas 学习之路 (一) canvas 是H5 里面神一样的东西,使得只是通过html和js就能做出非常棒的游戏和画面. 因为对前端无限的爱好,更加对canvas充满好奇,将我学习canvas的 ...

  3. canvas学习和面向对象(二)

    Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...

  4. canvas学习总结六:绘制矩形

    在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...

  5. canvas学习笔记、小函数整理

    http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16 http://bbs.csdn.net/topics/390582151 html5 ...

  6. canvas学习(三):文字渲染

    一.绘制基本的文字: var canvas = document.getElementById("myCanvas") var ctx = canvas.getContext('2 ...

  7. canvas学习(二):渐变与曲线的绘制

    canvas学习(二):渐变与曲线的绘制 一:createLinearGradient()线性渐变: 二:createLinearGradient() 放射状/圆形渐变: 三:createPatter ...

  8. canvas学习(一):线条,图像变换和状态保存

    canvas学习(一):线条,图像变换和状态保存 一:绘制一条线段: var canvas = document.getElementById('canvas') var ctx = canvas.g ...

  9. Canvas学习:封装Canvas绘制基本图形API

    Canvas学习:封装Canvas绘制基本图形API Canvas Canvas学习   从前面的文章中我们了解到,通过Canvas中的CanvasRenderingContext2D对象中的属性和方 ...

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

    其实canvas本身很简单,就是去学习它的API,多看实例,多自己动手练习,多总结.但是canvas的API实在是有点多,对于初学者来说,可能学到一半就止步不前了.我也有这种感觉,在学习的过程中,编写 ...

随机推荐

  1. 为Docker容器指定自定义网段的固定IP/静态IP地址

    第一步:创建自定义网络 备注:这里选取了172.172.0.0网段,也可以指定其他任意空闲的网段 docker network create --subnet=172.172.0.0/16 docke ...

  2. SQL AND & OR 运算符

    AND 和 OR 运算符用于基于一个以上的条件对记录进行过滤. AND 和 OR 运算符 AND 和 OR 可在 WHERE 子语句中把两个或多个条件结合起来. 如果第一个条件和第二个条件都成立,则 ...

  3. Python之调用函数

    Python之调用函数 Python内置了很多有用的函数,我们可以直接调用. 要调用一个函数,需要知道函数的名称和参数,比如求绝对值的函数 abs,它接收一个参数. 可以直接从Python的官方网站查 ...

  4. Maven-003-私人定制 maven archetype

    在使用 Maven 创建项目模块的时候,依据其默认的 archetype 模板,创建出的目录.及默认的单元测试工具为 JUnit 3.8.1,而且有些常用的资源文件目录.配置文件(例如:Log4J 的 ...

  5. wpa supplicant 保存 wifi 设置

    wpa suppliclant使用wpa gui连接wifi后,下次开机的时,不能保存,需要从新手动进行连接. 自动保存方法: 配置文件/etc/wpa_supplicant.conf 添加 upda ...

  6. windows的Timer和写文件方式串口注意!

    1.Timer要读取并分发消息,才能触发自定义回调函数 SetTimer(NULL, 1, 40, (TIMERPROC)TimerProc); while(GetMessage(&msg, ...

  7. iOS:搭建本地的服务器

    一.介绍 作为一个专业的程序员,不管你是前端还是移动端或者是后台,能够自己试着搭建一个本地的服务器还是很有必要的,有的时候,我们可以自己测试一些数据,很方便开发.其实,mac是自带有本地的服务器的,用 ...

  8. 字节流和字符流(BufferedReader类和BufferedWriter类)

    一般情况下,为了提高字符文件读/写效率,通常需要为文件读/写器添加一个缓冲读/写器,分别为BufferedReader类和BufferedWriter类. 1:BufferedReader类 假如上面 ...

  9. selenium and win32api

    I:Web 测试 selenium-2.45.0 python 2.7.8 win32api http://sourceforge.net/projects/pywin32/files/pywin32 ...

  10. 注解的基本盘点 -- 《Java编程思想》

    注解(元数据)为我们在代码中添加信息提供了一种形式化的方法,使我们可以在之后的某一个时刻非常方便地使用这些数据. ---<Java编程思想> 其实注解可以理解为一个工具类,只要使用了这个工 ...