[关闭]
@fantaghiro 2014-12-10T13:18:23.000000Z 字数 35424 阅读 1999

妙味课堂 - canvas

学习笔记 js 前端 妙味课堂 HTML5

标签

绘制环境

绘制方块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas</title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); //通过getContext('2d')才可以得到可以绘图的对象;webGL是支持3D绘图的
  15.             // oGC.fillRect(50, 50, 100, 100);
  16.             //oGC.strokeRect(50, 50, 100, 100); //边框默认为1像素，但仔细看，边框是2像素，因为边框绘制在50,50位置，向左延伸了0.5，向右延伸了0.5
  17.             oGC.strokeRect(50.5, 50.5, 100, 100); //这时候边框就刚好是1像素了
  18.         }
  19.     </script>
  20. </head>
  21. <body>
  22.     <canvas id="c1" width="400" height="400"> <!-- canvas的宽高最好在标签中设置，而不是在style中设置 -->
  23.         <span>不支持canvas的浏览器可以看到这里的文字</span>
  24.     </canvas> <!-- 默认：宽300 高150 -->
  25. </body>
  26. </html>

设置绘图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas</title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             oGC.fillStyle = 'red';
  17.             oGC.strokeStyle = 'blue';
  18.             oGC.lineWidth = 10;
  20.             //注意，下面两句话的顺序不同，出现的效果可能是不一样的，先写fill后写stroke，那么边框是压在填充上面的；如果先写stroke，后写fill，那么填充是盖在边框上面的
  21.             oGC.fillRect(50, 50, 100, 100);
  22.             oGC.strokeRect(50.5, 50.5, 100, 100);
  23.         }
  24.     </script>
  25. </head>
  26. <body>
  27.     <canvas id="c1" width="400" height="400"> 
  28.         <span>不支持canvas的浏览器可以看到这里的文字</span>
  29.     </canvas>
  30. </body>
  31. </html>

边界绘制

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas</title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             oGC.fillStyle = 'red';
  17.             oGC.strokeStyle = 'blue';
  18.             oGC.lineWidth = 10;
  19.             oGC.lineJoin = 'bevel';
  21.             oGC.fillRect(50, 50, 100, 100);
  22.             oGC.strokeRect(50.5, 50.5, 100, 100);
  23.         }
  24.     </script>
  25. </head>
  26. <body>
  27.     <canvas id="c1" width="400" height="400"> 
  28.         <span>不支持canvas的浏览器可以看到这里的文字</span>
  29.     </canvas>
  30. </body>
  31. </html>

绘制路径

moveTo, lineTo, stroke, fill

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas</title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             oGC.beginPath();
  17.             oGC.moveTo(100, 100);
  18.             oGC.lineTo(200, 200);
  19.             oGC.stroke();
  20.             oGC.lineTo(300, 200);
  21.             oGC.closePath(); //闭合路径
  22.             oGC.stroke();
  24.             //注意针对不同的绘制，进行开始和闭合的操作
  26.             oGC.beginPath(); //如果不添加beginPath，后面的OGC.fill()也会作用于上面的那个三角形，添加了beginPath()，OGC.fill()就仅作用于当前的绘制
  27.             oGC.moveTo(100, 200);
  28.             oGC.lineTo(200, 300);
  29.             oGC.stroke();
  30.             oGC.lineTo(300, 300);
  31.             oGC.closePath();
  32.             oGC.fill();
  33.         }
  34.     </script>
  35. </head>
  36. <body>
  37.     <canvas id="c1" width="400" height="400"> 
  38.         <span>不支持canvas的浏览器可以看到这里的文字</span>
  39.     </canvas>
  40. </body>
  41. </html>

rect

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas</title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             oGC.beginPath();
  18.             oGC.rect(100, 100, 100, 100);
  20.             oGC.closePath(); 
  21.             oGC.stroke();
  22.         }
  23.     </script>
  24. </head>
  25. <body>
  26.     <canvas id="c1" width="400" height="400"> 
  27.         <span>不支持canvas的浏览器可以看到这里的文字</span>
  28.     </canvas>
  29. </body>
  30. </html>

clearRect

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas</title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             oGC.beginPath();
  18.             oGC.rect(100, 100, 100, 100);
  20.             oGC.closePath(); 
  21.             oGC.fill();
  23.             oGC.clearRect(0, 0, oC.width, oC.height);
  24.         }
  25.     </script>
  26. </head>
  27. <body>
  28.     <canvas id="c1" width="400" height="400"> 
  29.         <span>不支持canvas的浏览器可以看到这里的文字</span>
  30.     </canvas>
  31. </body>
  32. </html>

save()和restore()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas</title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             oGC.save();
  17.             oGC.fillStyle = 'red'; //这一句话封闭到了oGC.save()和oGC.restore()之中，不会影响到下面一个三角的fillStyle
  19.             oGC.beginPath();
  20.             oGC.moveTo(100, 100);
  21.             oGC.lineTo(200, 200);
  22.             oGC.lineTo(300, 200);
  23.             oGC.closePath(); 
  24.             oGC.fill();
  25.             oGC.restore();
  27.             oGC.beginPath();
  28.             oGC.moveTo(100, 200);
  29.             oGC.lineTo(200, 300);
  30.             oGC.lineTo(300, 300);
  31.             oGC.closePath();
  32.             oGC.fill();
  33.         }
  34.     </script>
  35. </head>
  36. <body>
  37.     <canvas id="c1" width="400" height="400"> 
  38.         <span>不支持canvas的浏览器可以看到这里的文字</span>
  39.     </canvas>
  40. </body>
  41. </html>

断点样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>canvas</title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             oGC.lineWidth = 20;
  17.             oGC.lineCap = 'square';
  18.             oGC.moveTo(100, 100);
  19.             oGC.lineTo(200, 200);
  20.             oGC.stroke();
  21.         }
  22.     </script>
  23. </head>
  24. <body>
  25.     <canvas id="c1" width="400" height="400"> 
  26.         <span>不支持canvas的浏览器可以看到这里的文字</span>
  27.     </canvas>
  28. </body>
  29. </html>

鼠标画线

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>鼠标画线</title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             oC.onmousedown = function(ev){
  17.                 var ev = ev || window.event;
  18.                 oGC.moveTo(ev.clientX-oC.offsetLeft, ev.clientY-oC.offsetTop);
  19.                 document.onmousemove = function(ev){
  20.                     var ev = ev || window.event;
  21.                     oGC.lineTo(ev.clientX-oC.offsetLeft, ev.clientY-oC.offsetTop);
  22.                     oGC.stroke();
  23.                 }
  24.                 document.onmouseup = function(){
  25.                     document.onmousemove = null;
  26.                     document.onmouseup = null;
  27.                 }
  28.             }
  29.         }
  30.     </script>
  31. </head>
  32. <body>
  33.     <canvas id="c1" width="400" height="400"> 
  34.         <span>不支持canvas的浏览器可以看到这里的文字</span>
  35.     </canvas>
  36. </body>
  37. </html>

方块移动

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>方块移动</title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  15.             var num = 0;
  17.             oGC.fillRect(0, 0, 100, 100);
  18.             setInterval(function(){
  19.                 num++;
  20.                 oGC.clearRect(0, 0, oC.width, oC.height);
  21.                 oGC.fillRect(num, num, 100, 100);
  22.             }, 30)
  23.         }
  24.     </script>
  25. </head>
  26. <body>
  27.     <canvas id="c1" width="400" height="400"> 
  28.         <span>不支持canvas的浏览器可以看到这里的文字</span>
  29.     </canvas>
  30. </body>
  31. </html>

在style中设置canvas宽高的问题

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>在style中设置canvas宽高的问题</title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff; width: 400px; height: 400px;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             oGC.fillRect(0, 0, 100, 100); //把canvas的宽高写在style中，其实没有实际上更改canvas的宽高，而是将canvas进行等比例放大。因此这时候看起来这个方块就很大。 
  18.             //在canvas标签上进行的width和height的设置是真正宽高的设置；在style中给canvas设置的宽高，其实会让canvas从默认300*150的基础上等比例缩放。
  19.         }
  20.     </script>
  21. </head>
  22. <body>
  23.     <canvas id="c1"> 
  24.         <span>不支持canvas的浏览器可以看到这里的文字</span>
  25.     </canvas>
  26. </body>
  27. </html>

绘制圆

绘制圆

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>画圆</title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             oGC.moveTo(200, 200);
  18.             //弧度 = 角度 * Math.PI/180
  19.             oGC.arc(200, 200, 150, 0, 90*Math.PI/180, true);
  20.             //oGC.closePath();
  21.             oGC.stroke();
  22.         }
  23.     </script>
  24. </head>
  25. <body>
  26.     <canvas id="c1" width="400" height="400"></canvas>
  27. </body>
  28. </html>

用arc绘制钟表

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>画钟表</title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             function toDraw(){
  17.                 var x = 200;
  18.                 var y = 200;
  19.                 var r = 150;
  21.                 oGC.clearRect(0, 0, oC.width, oC.height);
  23.                 var oDate = new Date();
  24.                 var oHours = oDate.getHours();
  25.                 var oMin = oDate.getMinutes();
  26.                 var oSec = oDate.getSeconds();
  27.                 var oHoursValue = (-90 + oHours*30 + oMin/2) * Math.PI/180;
  28.                 var oMinValue = (-90 + oMin*6) * Math.PI/180;
  29.                 var oSecValue = (-90 + oSec*6) * Math.PI/180;
  31.                 /*oGC.moveTo(x, y);
  32.                 oGC.arc(x, y, r, 0, 6*Math.PI/180, false);
  33.                 oGC.moveTo(x, y);
  34.                 oGC.arc(x, y, r, 6*Math.PI/180, 12*Math.PI/180, false);*/
  36.                 oGC.beginPath();
  37.                 for(var i=0; i<60; i++){
  38.                     oGC.moveTo(x, y);
  39.                     oGC.arc(x, y, r, 6*i*Math.PI/180, 6*(i+1)*Math.PI/180, false);
  40.                 }
  41.                 oGC.closePath();
  42.                 oGC.stroke();
  44.                 oGC.fillStyle = '#fff';
  45.                 oGC.beginPath();
  46.                 oGC.moveTo(x, y);
  47.                 oGC.arc(x, y, r*19/20, 0, 360*Math.PI/180);
  48.                 oGC.closePath();
  49.                 oGC.fill();
  51.                 oGC.lineWidth = 3;
  52.                 oGC.beginPath();
  53.                 for(var i=0; i<12; i++){
  54.                     oGC.moveTo(x, y);
  55.                     oGC.arc(x, y, r, 30*i*Math.PI/180, 30*(i+1)*Math.PI/180, false);
  56.                 }
  57.                 oGC.closePath();
  58.                 oGC.stroke();
  60.                 oGC.fillStyle = '#fff';
  61.                 oGC.beginPath();
  62.                 oGC.moveTo(x, y);
  63.                 oGC.arc(x, y, r*18/20, 0, 360*Math.PI/180);
  64.                 oGC.closePath();
  65.                 oGC.fill();
  67.                 //下面是画分针
  68.                 oGC.lineWidth = 5;
  69.                 oGC.beginPath();
  70.                 oGC.moveTo(x, y);
  71.                 oGC.arc(x, y, r*10/20, oHoursValue, oHoursValue, false); //起始点和终止点写同一个弧度，就是一条直线
  72.                 oGC.closePath();
  73.                 oGC.stroke();
  75.                 //下面是画时针
  76.                 oGC.lineWidth = 3;
  77.                 oGC.beginPath();
  78.                 oGC.moveTo(x, y);
  79.                 oGC.arc(x, y, r*14/20, oMinValue, oMinValue, false); //起始点和终止点写同一个弧度，就是一条直线
  80.                 oGC.closePath();
  81.                 oGC.stroke();
  83.                 //下面是画秒针
  84.                 oGC.lineWidth = 1;
  85.                 oGC.beginPath();
  86.                 oGC.moveTo(x, y);
  87.                 oGC.arc(x, y, r*18/20, oSecValue, oSecValue, false); //起始点和终止点写同一个弧度，就是一条直线
  88.                 oGC.closePath();
  89.                 oGC.stroke();
  90.             }
  92.             setInterval(toDraw, 1000);
  94.             toDraw();
  95.         }
  96.     </script>
  97. </head>
  98. <body>
  99.     <canvas id="c1" width="400" height="400"></canvas>
  100. </body>
  101. </html>

绘制其他曲线

arcTo()

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title></title>
  5.     <style>
  6.         body {background: #000;}
  7.         #c1 {background: #fff;}
  8.         span {color: #fff;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oC = document.getElementById('c1');
  13.             var oGC = oC.getContext('2d'); 
  15.             oGC.moveTo(100, 200);
  16.             oGC.arcTo(100, 100, 200, 100, 50);
  17.             oGC.stroke();
  18.         }
  19.     </script>
  20. </head>
  21. <body>
  22.     <canvas id="c1" width="400" height="400"></canvas>
  23. </body>
  24. </html>

quadraticCurveTo()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             oGC.moveTo(100, 200);
  17.             oGC.quadraticCurveTo(100, 100, 200, 100);
  18.             oGC.stroke();
  19.         }
  20.     </script>
  21. </head>
  22. <body>
  23.     <canvas id="c1" width="400" height="400"></canvas>
  24. </body>
  25. </html>

bezierCurveTo()

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             oGC.moveTo(100, 200);
  17.             oGC.bezierCurveTo(100, 100, 200, 200, 200, 100);
  18.             oGC.stroke();
  19.         }
  20.     </script>
  21. </head>
  22. <body>
  23.     <canvas id="c1" width="400" height="400"></canvas>
  24. </body>
  25. </html>

变换

变换的基本应用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             oGC.translate(100, 100);
  17.             oGC.rotate(45*Math.PI/180);
  18.             oGC.scale(2, 2);
  19.             oGC.fillRect(0, 0, 100, 100);
  20.         }
  21.     </script>
  22. </head>
  23. <body>
  24.     <canvas id="c1" width="400" height="400"></canvas>
  25. </body>
  26. </html>

旋转的小方块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  15.             var num = 0;
  17.             setInterval(function(){
  18.                 num++;
  19.                 oGC.save(); //添加上save和restore，防止旋转角度的累加
  20.                 oGC.clearRect(0,0,oC.width,oC.height);
  21.                 oGC.translate(100, 100);
  22.                 oGC.rotate(num*Math.PI/180);
  23.                 oGC.translate(-50, -50); //让方块围绕中心旋转
  24.                 oGC.fillRect(0, 0, 100, 100);
  25.                 oGC.restore();
  26.             }, 30)
  27.         }
  28.     </script>
  29. </head>
  30. <body>
  31.     <canvas id="c1" width="400" height="400"></canvas>
  32. </body>
  33. </html>

缩放小方块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  15.             var num = 0;
  16.             var num2 = 0;
  17.             var value = 1;
  19.             setInterval(function(){
  20.                 num++;
  21.                 oGC.save(); //添加上save和restore，防止旋转角度的累加
  22.                 oGC.clearRect(0,0,oC.width,oC.height);
  23.                 oGC.translate(100, 100);
  25.                 if(num2 == 75){
  26.                     value = -1;
  27.                 } else if(num2 == 25) {
  28.                     value = 1;
  29.                 }
  30.                 num2 += value;
  31.                 oGC.scale(num2*1/50, num2*1/50);
  32.                 oGC.rotate(num*Math.PI/180);
  33.                 oGC.translate(-50, -50); //让方块围绕中心旋转
  35.                 oGC.fillRect(0, 0, 100, 100);
  36.                 oGC.restore();
  37.             }, 30)
  38.         }
  39.     </script>
  40. </head>
  41. <body>
  42.     <canvas id="c1" width="400" height="400"></canvas>
  43. </body>
  44. </html>

插入图片

设置背景

drawImage()方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d'); 
  16.             //图片预加载的方法
  17.             var yImg = new Image();
  18.             yImg.onload = function(){
  19.                 draw(this);
  20.             }
  21.             yImg.src = 'images/2.png';
  23.             function draw(obj){
  24.                 oGC.drawImage(obj, 0, 0, 400, 400);
  25.             }
  26.         }
  27.     </script>
  28. </head>
  29. <body>
  30.     <canvas id="c1" width="400" height="400"></canvas>
  31. </body>
  32. </html>

微博的图片旋转效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var aInput = document.getElementsByTagName('input');
  14.             var oImg = document.getElementById('img1');
  15.             var iNow = 0;
  17.             var yImg = new Image();
  18.             yImg.onload = function(){
  19.                 draw(oImg);
  20.             }
  21.             yImg.src = oImg.src;
  22.             function draw(obj){
  23.                 var oC = document.createElement('canvas');
  24.                 var oGC = oC.getContext('2d');
  26.                 oC.width = obj.width;
  27.                 oC.height = obj.height;
  29.                 obj.parentNode.replaceChild(oC, obj)
  30.                 oGC.drawImage(obj, 0, 0);
  32.                 aInput[1].onclick = function(){
  33.                     //iNow记录点击了多少次
  34.                     if(iNow == 3){
  35.                         iNow = 0;
  36.                     } else {
  37.                         iNow++; 
  38.                     }
  39.                     toChange(); //旋转图片的方法
  40.                 }
  42.                 aInput[0].onclick = function(){
  43.                     if(iNow == 0){
  44.                         iNow = 3;
  45.                     } else {
  46.                         iNow--; 
  47.                     }
  48.                     toChange(); //旋转图片的方法
  49.                 }
  51.                 function toChange(){
  52.                     switch(iNow){
  53.                         case 1:
  54.                             oC.width = obj.height;
  55.                             oC.height = obj.width;
  56.                             oGC.rotate(90*Math.PI/180);
  57.                             oGC.drawImage(obj, 0, -obj.height);
  58.                         break;
  60.                         case 2:
  61.                             oC.width = obj.width;
  62.                             oC.height = obj.height;
  63.                             oGC.rotate(180*Math.PI/180);
  64.                             oGC.drawImage(obj, -obj.width, -obj.height);
  65.                         break;
  67.                         case 3:
  68.                             oC.width = obj.height;
  69.                             oC.height = obj.width;
  70.                             oGC.rotate(270*Math.PI/180);
  71.                             oGC.drawImage(obj, -obj.width, 0);
  72.                         break;
  74.                         case 0:
  75.                             oC.width = obj.width;
  76.                             oC.height = obj.height;
  77.                             oGC.rotate(0);
  78.                             oGC.drawImage(obj, 0, 0);
  79.                         break;
  80.                     }
  81.                 }
  82.             }   
  83.         }
  84.     </script>
  85. </head>
  86. <body>
  87.     <input type="button" value="←">
  88.     <input type="button" value="→">
  89.     <div>
  90.         <img src="images/2.png" id="img1">
  91.     </div>
  92. </body>
  93. </html>

设置背景

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d');
  16.             var yImg = new Image();
  17.             yImg.onload = function(){
  18.                 draw(this);
  19.             }
  20.             yImg.src = 'images/2.png';
  21.             function draw(obj){
  22.                 var bg = oGC.createPattern(obj, 'repeat');
  23.                 oGC.fillStyle = bg;
  24.                 oGC.fillRect(0, 0, 300, 300);
  25.             }   
  26.         }
  27.     </script>
  28. </head>
  29. <body>
  30.     <canvas id="c1" width="400" height="400"></canvas>
  31. </body>
  32. </html>

渐变

线性渐变

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d');
  16.             var obj = oGC.createLinearGradient(150, 100, 250, 200); //从起点坐标到终点坐标进行一个渐变
  17.             obj.addColorStop(0, 'red'); //起点用0表示
  18.             obj.addColorStop(0.5, 'yellow');
  19.             obj.addColorStop(1, 'blue'); //终点用1表示
  20.             oGC.fillStyle = obj;
  21.             oGC.fillRect(150, 100, 100, 100);
  22.         }
  23.     </script>
  24. </head>
  25. <body>
  26.     <canvas id="c1" width="400" height="400"></canvas>
  27. </body>
  28. </html>

径向渐变

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d');
  16.             var obj = oGC.createRadialGradient(200, 200, 100, 200, 200, 150); //从起点坐标到终点坐标进行一个渐变
  17.             obj.addColorStop(0, 'red'); //起点用0表示
  18.             obj.addColorStop(0.5, 'yellow');
  19.             obj.addColorStop(1, 'blue'); //终点用1表示
  20.             oGC.fillStyle = obj;
  21.             oGC.fillRect(0, 0, oC.width, oC.height);
  22.         }
  23.     </script>
  24. </head>
  25. <body>
  26.     <canvas id="c1" width="400" height="400"></canvas>
  27. </body>
  28. </html>

文本

文本的操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d');
  16.             oGC.font = '60px impact'; //两个参数必须要写
  17.             oGC.textBaseline = 'top';
  18.             oGC.fillText('妙味课堂', 0, 0);
  19.             oGC.strokeText('妙味课堂', 0, 200);
  20.         }
  21.     </script>
  22. </head>
  23. <body>
  24.     <canvas id="c1" width="400" height="400"></canvas>
  25. </body>
  26. </html>

文字居中

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d');
  16.             oGC.font = '60px impact'; 
  17.             oGC.textBaseline = 'top'; //middle bottom
  19.             var w = oGC.measureText('妙味课堂').width;
  20.             oGC.fillText('妙味课堂', (oC.width - w) / 2, (oC.height - 60) / 2);
  21.         }
  22.     </script>
  23. </head>
  24. <body>
  25.     <canvas id="c1" width="400" height="400"></canvas>
  26. </body>
  27. </html>

阴影

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.         span {color: #fff;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d');
  16.             oGC.font = '60px impact'; 
  17.             oGC.textBaseline = 'top';
  18.             oGC.shadowOffsetX = 10;
  19.             oGC.shadowOffsetY = 10;
  20.             oGC.shadowBlur = 3;
  21.             oGC.shadowColor = 'yellow'; //一定要设置阴影颜色，阴影才能显示出来。阴影的默认颜色是rgba(0,0,0,0)即黑色透明
  22.             var w = oGC.measureText('妙味课堂').width;
  23.             oGC.fillText('妙味课堂', (oC.width - w) / 2, (oC.height - 60) / 2);
  24.         }
  25.     </script>
  26. </head>
  27. <body>
  28.     <canvas id="c1" width="400" height="400"></canvas>
  29. </body>
  30. </html>

像素

getImageData和putImageData

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oC = document.getElementById('c1');
  13.             var oGC = oC.getContext('2d');
  15.             oGC.fillRect(0, 0, 100, 100);
  17.             var oImg = oGC.getImageData(0, 0, 100, 100); //获取方块的所有像素的值
  18.             //alert(oImg.width); //一行的像素个数
  19.             //alert(oImg.height); //一列的像素个数
  20.             //alert(oImg.data); //整体像素的数组集合
  21.             //alert(oImg.data.length); //40000 这个方块应该是10000个像素。也就是数组中每四个值代表一个像素。一个像素中的四个值代表r/g/b/a。
  22.             //alert(oImg.data[0]); //0 0-255 黑色到白色
  23.             //alert(oImg.data[1]); //0 0-255 黑色到白色
  24.             //alert(oImg.data[2]); //0 0-255 黑色到白色
  25.             //alert(oImg.data[3]); //255 0-255 透明到不透明
  26.             //也就是说第一个像素的rgba是0, 0, 0, 255，也就是不透明的黑色
  28.             for(var i=0; i<oImg.width*oImg.height; i++){
  29.                 oImg.data[4*i] = 255;
  30.                 oImg.data[4*i+1] = 0;
  31.                 oImg.data[4*i+2] = 0;
  32.                 oImg.data[4*i+3] = 100;
  33.             } //通过循环更改了像素颜色
  34.             oGC.putImageData(oImg, 100, 100); //把oImg这样的像素信息添到了位于100,100的位置
  35.         }
  36.     </script>
  37. </head>
  38. <body>
  39.     <canvas id="c1" width="400" height="400"></canvas>
  40. </body>
  41. </html>

createImageData

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         body {background: #000;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oC = document.getElementById('c1');
  13.             var oGC = oC.getContext('2d');
  15.             var oImg = oGC.createImageData(100, 100);
  17.             for(var i=0; i<oImg.width*oImg.height; i++){
  18.                 oImg.data[4*i] = 255;
  19.                 oImg.data[4*i+1] = 0;
  20.                 oImg.data[4*i+2] = 0;
  21.                 oImg.data[4*i+3] = 100;
  22.             } 
  23.             oGC.putImageData(oImg, 100, 100); 
  24.         }
  25.     </script>
  26. </head>
  27. <body>
  28.     <canvas id="c1" width="400" height="400"></canvas>
  29. </body>
  30. </html>

像素显字；让文字中随机的10%的像素显示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>像素显字</title>
  6.     <style>
  7.         body {background: #000; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oC = document.getElementById('c1');
  13.             var oGC = oC.getContext('2d');
  15.             var aLi = document.getElementsByTagName('li');
  17.             for(var i=0; i<aLi.length; i++){
  18.                 aLi[i].onclick = function(){
  19.                     var str = this.innerHTML;
  20.                     var h = 180;
  22.                     oGC.clearRect(0, 0, oC.width, oC.height);
  23.                     oGC.font = h + 'px impact';
  24.                     oGC.fillStyle = 'red';
  25.                     oGC.textBaseline = 'top';
  26.                     var w = oGC.measureText(str).width;
  27.                     oGC.fillText(str, (oC.width - w) / 2, (oC.height - h) / 2);
  29.                     var oImg = oGC.getImageData((oC.width - w) / 2, (oC.height - h) / 2, w, h);
  30.                     oGC.clearRect(0, 0, oC.width, oC.height);
  31.                     var arr = randomArr(w*h, w*h/10);
  32.                     var newImg = oGC.createImageData(w, h);
  33.                     for(var i = 0; i<arr.length; i++){
  34.                         newImg.data[arr[i]*4] = oImg.data[4*arr[i]];
  35.                         newImg.data[arr[i]*4+1] = oImg.data[4*arr[i]+1];
  36.                         newImg.data[arr[i]*4+2] = oImg.data[4*arr[i]+2];
  37.                         newImg.data[arr[i]*4+3] = oImg.data[4*arr[i]+3];
  38.                     }
  40.                     oGC.putImageData(newImg, (oC.width - w) / 2, (oC.height - h) / 2);
  41.                 }
  42.             }
  44.             function randomArr(iAll, iNow){ //从iAll个数里面随机取出iNow个数
  45.                 var arr = [];
  46.                 var newArr = [];
  48.                 for(var i=0; i<iAll; i++){
  49.                     arr.push(i);
  50.                 }
  52.                 for(var i=0; i<iNow; i++){
  53.                     newArr.push(arr.splice(Math.floor(Math.random()*arr.length), 1));
  54.                 }
  55.                 return newArr;
  56.             }
  57.         }
  58.     </script>
  59. </head>
  60. <body>
  61.     <canvas id="c1" width="400" height="400"></canvas>
  62.     <ul style="float: left">
  63.         <li>秒</li>
  64.         <li>味</li>
  65.         <li>课</li>
  66.         <li>堂</li>
  67.     </ul>
  68. </body>
  69. </html>

像素显字动画版

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>像素显字升级版</title>
  6.     <style>
  7.         body {background: #000; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oC = document.getElementById('c1');
  13.             var oGC = oC.getContext('2d');
  15.             var aLi = document.getElementsByTagName('li');
  17.             for(var i=0; i<aLi.length; i++){
  18.                 aLi[i].onclick = function(){
  19.                     var str = this.innerHTML;
  20.                     var h = 180;
  21.                     var timer = null;
  22.                     clearInterval(timer);
  23.                     var iNow = 0;
  25.                     oGC.clearRect(0, 0, oC.width, oC.height);
  26.                     oGC.font = h + 'px impact';
  27.                     oGC.fillStyle = 'red';
  28.                     oGC.textBaseline = 'top';
  29.                     var w = oGC.measureText(str).width;
  30.                     oGC.fillText(str, (oC.width - w) / 2, (oC.height - h) / 2);
  32.                     var oImg = oGC.getImageData((oC.width - w) / 2, (oC.height - h) / 2, w, h);
  33.                     oGC.clearRect(0, 0, oC.width, oC.height);
  34.                     var arr = randomArr(w*h, w*h/10);
  35.                     var newImg = oGC.createImageData(w, h);
  36.                     timer = setInterval(function(){
  38.                         for(var i = 0; i<arr[iNow].length; i++){
  39.                             newImg.data[arr[iNow][i]*4] = oImg.data[4*arr[iNow][i]];
  40.                             newImg.data[arr[iNow][i]*4+1] = oImg.data[4*arr[iNow][i]+1];
  41.                             newImg.data[arr[iNow][i]*4+2] = oImg.data[4*arr[iNow][i]+2];
  42.                             newImg.data[arr[iNow][i]*4+3] = oImg.data[4*arr[iNow][i]+3];
  43.                         }
  45.                         oGC.putImageData(newImg, (oC.width - w) / 2, (oC.height - h) / 2);
  47.                         if(iNow == 9){
  48.                             iNow = 0;
  49.                             clearInterval(timer);
  50.                         } else {
  51.                             iNow++;
  52.                         }
  53.                     }, 200)
  57.                 }
  58.             }
  60.             function randomArr(iAll, iNow){ //从iAll个数里面随机取出iNow个数
  61.                 var arr = [];
  62.                 var allArr = [];
  64.                 for(var i=0; i<iAll; i++){
  65.                     arr.push(i);
  66.                 }
  68.                 for(var j=0; j<iAll/iNow; j++){
  69.                     var newArr = []
  70.                     for(var i=0; i<iNow; i++){
  71.                         newArr.push(arr.splice(Math.floor(Math.random()*arr.length), 1));
  72.                     }
  73.                     allArr.push(newArr);
  74.                 }
  77.                 return allArr;
  78.             }
  79.         }
  80.     </script>
  81. </head>
  82. <body>
  83.     <canvas id="c1" width="400" height="400"></canvas>
  84.     <ul style="float: left">
  85.         <li>秒</li>
  86.         <li>味</li>
  87.         <li>课</li>
  88.         <li>堂</li>
  89.     </ul>
  90. </body>
  91. </html>

获取和设置指定坐标 封装函数getXY和setXY

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>getXY、setXY</title>
  6.     <style>
  7.         body {background: #000; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oC = document.getElementById('c1');
  13.             var oGC = oC.getContext('2d');
  15.             oGC.fillRect(0, 0, 100, 100);
  17.             var oImg = oGC.getImageData(0, 0, 100, 100);
  19.             alert(getXY(oImg, 3, 5)); //得到坐标为3、5的rgba
  21.             //setXY(oImg, 3, 5, [255, 0, 0, 255]); //设置坐标为3、5的rgba
  23.             for(var i=0; i<oImg.width; i++){
  24.                 setXY(oImg, i, 5, [255, 0, 0, 255]);
  25.             }
  27.             oGC.putImageData(oImg, 100, 100);
  29.             function getXY(obj, x, y){
  30.                 var w = obj.width;
  31.                 var h = obj.height;
  32.                 var d = obj.data;
  34.                 var color = [];
  36.                 color[0] = d[4*(y*w+x)];
  37.                 color[1] = d[4*(y*w+x)+1];
  38.                 color[2] = d[4*(y*w+x)+2];
  39.                 color[3] = d[4*(y*w+x)+3];
  41.                 return color;
  42.             }
  44.             function setXY(obj, x, y, color){
  45.                 var w = obj.width;
  46.                 var h = obj.height;
  47.                 var d = obj.data;
  49.                 d[4*(y*w+x)] = color[0];
  50.                 d[4*(y*w+x)+1] = color[1];
  51.                 d[4*(y*w+x)+2] = color[2];
  52.                 d[4*(y*w+x)+3] = color[3];
  54.             }
  55.         }
  56.     </script>
  57. </head>
  58. <body>
  59.     <canvas id="c1" width="400" height="400"></canvas>
  60. </body>
  61. </html>

图片的像素操作——反色、倒影、渐变

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图片的像素操作</title>
  6.     <style>
  7.         body {background: #000; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oC = document.getElementById('c1');
  13.             var oGC = oC.getContext('2d');
  15.             var yImg = new Image();
  16.             yImg.onload = function(){
  17.                 draw(this);
  18.             }
  19.             yImg.src = 'img/2.png';
  21.             function draw(obj){
  22.                 oC.width = obj.width;
  23.                 oGC.drawImage(obj, 0, 0);
  25.                 var oImg = oGC.getImageData(0, 0, obj.width, obj.height);
  26.                 var w = oImg.width;
  27.                 var h = oImg.height;
  28.                 var newImg = oGC.createImageData(obj.width, obj.height);
  30.                 //反色效果+倒影效果+渐变效果开始
  31.                 //反色，就是用255减去每个值
  32.                 for(var i=0; i<h; i++){ //循环每一列
  33.                     for(var j=0; j<w; j++){ //循环每一行
  34.                         var result = [];
  35.                         var color = getXY(oImg, j, i);
  36.                         result[0] = 255 - color[0];
  37.                         result[1] = 255 - color[1];
  38.                         result[2] = 255 - color[2];
  39.                         result[3] = 255*i/h;
  41.                         setXY(newImg, j, h-i, result);
  42.                     }
  43.                 }
  44.                 oGC.putImageData(newImg, 0, obj.height);
  45.                 //反色效果+倒影效果+渐变效果结束
  46.             }
  48.             function getXY(obj, x, y){
  49.                 var w = obj.width;
  50.                 var h = obj.height;
  51.                 var d = obj.data;
  53.                 var color = [];
  55.                 color[0] = d[4*(y*w+x)];
  56.                 color[1] = d[4*(y*w+x)+1];
  57.                 color[2] = d[4*(y*w+x)+2];
  58.                 color[3] = d[4*(y*w+x)+3];
  60.                 return color;
  61.             }
  63.             function setXY(obj, x, y, color){
  64.                 var w = obj.width;
  65.                 var h = obj.height;
  66.                 var d = obj.data;
  68.                 d[4*(y*w+x)] = color[0];
  69.                 d[4*(y*w+x)+1] = color[1];
  70.                 d[4*(y*w+x)+2] = color[2];
  71.                 d[4*(y*w+x)+3] = color[3];
  73.             }
  74.         }
  75.     </script>
  76. </head>
  77. <body>
  78.     <canvas id="c1" width="400" height="400"></canvas>
  79. </body>
  80. </html>

马赛克效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图片的像素操作</title>
  6.     <style>
  7.         body {background: #000; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oC = document.getElementById('c1');
  13.             var oGC = oC.getContext('2d');
  15.             var yImg = new Image();
  16.             yImg.onload = function(){
  17.                 draw(this);
  18.             }
  19.             yImg.src = 'img/2.png';
  21.             function draw(obj){
  22.                 oC.width = obj.width;
  23.                 oC.height = obj.height * 2;
  24.                 oGC.drawImage(obj, 0, 0);
  26.                 var oImg = oGC.getImageData(0, 0, obj.width, obj.height);
  27.                 var w = oImg.width;
  28.                 var h = oImg.height;
  29.                 var newImg = oGC.createImageData(obj.width, obj.height);
  31.                 var num = 10;
  32.                 var stepW = w/num;
  33.                 var stepH = h/num;
  35.                 //马赛克效果就是在num×num的像素里面随机取一个颜色，把这个num×num的区域都改成这个颜色
  37.                 for(var i=0; i<stepH; i++){
  38.                     for(var j=0; j<stepW; j++){
  39.                         var color = getXY(oImg, j*num+Math.floor(Math.random()*num), i*num+Math.floor(Math.random()*num));
  40.                         for(var k=0; k<num; k++){
  41.                             for(var l=0; l<num; l++){
  42.                                 setXY(newImg, j*num+l, i*num+k, color);
  43.                             }
  44.                         }
  45.                     }
  46.                 }
  48.                 oGC.putImageData(newImg, 0, obj.height);
  49.             }
  51.             function getXY(obj, x, y){
  52.                 var w = obj.width;
  53.                 var h = obj.height;
  54.                 var d = obj.data;
  56.                 var color = [];
  58.                 color[0] = d[4*(y*w+x)];
  59.                 color[1] = d[4*(y*w+x)+1];
  60.                 color[2] = d[4*(y*w+x)+2];
  61.                 color[3] = d[4*(y*w+x)+3];
  63.                 return color;
  64.             }
  66.             function setXY(obj, x, y, color){
  67.                 var w = obj.width;
  68.                 var h = obj.height;
  69.                 var d = obj.data;
  71.                 d[4*(y*w+x)] = color[0];
  72.                 d[4*(y*w+x)+1] = color[1];
  73.                 d[4*(y*w+x)+2] = color[2];
  74.                 d[4*(y*w+x)+3] = color[3];
  76.             }
  77.         }
  78.     </script>
  79. </head>
  80. <body>
  81.     <canvas id="c1" width="400" height="400"></canvas>
  82. </body>
  83. </html>

合成

globalAlpha

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>合成</title>
  6.     <style>
  7.         body {background: #000; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oC = document.getElementById('c1');
  13.             var oGC = oC.getContext('2d');
  15.             oGC.fillRect(0, 0, 100, 100);
  16.             oGC.fillStyle = 'red';
  17.             oGC.globalAlpha = 0.5; //在此之后操作的图形的透明度都会是半透明的
  18.             oGC.fillRect(50, 50, 100, 100);
  19.         }
  20.     </script>
  21. </head>
  22. <body>
  23.     <canvas id="c1" width="400" height="400"></canvas>
  24. </body>
  25. </html>

元素与元素叠加

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>合成</title>
  6.     <style>
  7.         body {background: #000; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oC = document.getElementById('c1');
  13.             var oGC = oC.getContext('2d');
  15.             oGC.fillRect(0, 0, 100, 100);
  16.             oGC.fillStyle = 'red';
  18.             //source就是新画的，destination就是先画的
  19.             //oGC.globalCompositeOperation = 'destination-over';
  20.             //oGC.globalCompositeOperation = 'source-atop';
  21.             oGC.globalCompositeOperation = 'xor';
  23.             oGC.fillRect(50, 50, 100, 100); //默认后画的会盖在先画的前面。改变覆盖顺序用globalCompositeOperation属性
  24.         }
  25.     </script>
  26. </head>
  27. <body>
  28.     <canvas id="c1" width="400" height="400"></canvas>
  29. </body>
  30. </html>

将画布导出为图像

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>画布导出为图像</title>
  6.     <style>
  7.         body {background: blue; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oImg = document.getElementById('img1');
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d');
  16.             oGC.fillRect(0, 0, 100, 100);
  17.             oGC.fillStyle = 'red';
  18.             oGC.globalCompositeOperation = 'xor';
  20.             oGC.fillRect(50, 50, 100, 100);
  21.             //alert(oC.toDataURL());
  22.             oImg.src = oC.toDataURL();
  23.         }
  24.     </script>
  25. </head>
  26. <body>
  27.     <canvas id="c1" width="400" height="400"></canvas>
  28.     <img id="img1" src="">
  29. </body>
  30. </html>

事件操作

isPointInPath方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件操作</title>
  6.     <style>
  7.         body {background: #000; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oC = document.getElementById('c1');
  13.             var oGC = oC.getContext('2d');
  15.             oGC.beginPath();
  16.             oGC.arc(100, 100, 50, 0, 360*Math.PI/180, false);
  17.             oGC.closePath();
  18.             oGC.fill();
  20.             oGC.beginPath();
  21.             oGC.arc(200, 200, 50, 0, 360*Math.PI/180, false);
  22.             oGC.closePath();
  23.             oGC.fill();
  25.             //点击圆以内的部分，弹出123
  26.             oC.onmousedown = function(ev){
  27.                 var ev = ev || window.event;
  28.                 var x = ev.clientX - oC.offsetLeft;
  29.                 var y = ev.clientY - oC.offsetTop;
  31.                 if(oGC.isPointInPath(x, y)){
  32.                     //isPointInPath方法只针对最后一次画出来的那个图形
  33.                     alert(123);
  34.                 }
  35.             }
  36.         }
  37.     </script>
  38. </head>
  39. <body>
  40.     <canvas id="c1" width="400" height="400"></canvas>
  41. </body>
  42. </html>

点击不同的图形，执行不同的操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>事件操作</title>
  6.     <style>
  7.         body {background: #000; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script>
  11.         window.onload = function(){
  12.             var oC = document.getElementById('c1');
  13.             var oGC = oC.getContext('2d');
  15.             var c1 = new Shape(100, 100, 50);
  16.             var c2 = new Shape(200, 200, 50);
  18.             oC.onmousedown = function(ev){
  19.                 var ev = ev || window.event;
  20.                 var point = {
  21.                     x : ev.clientX - oC.offsetLeft,
  22.                     y: ev.clientY - oC.offsetTop
  23.                 }
  24.                 c1.reDraw(point);
  25.                 c2.reDraw(point);
  26.             }
  28.             c1.click = function(){
  29.                 alert(123);
  30.             }
  31.             c2.click = function(){
  32.                 alert(456);
  33.             }
  35.             //要通过对象来实现。点击某个图形的时候，先找到这个图形对应的对象，然后再让这个图形重绘一下，然后就可以使用isPointInPath方法了，因为这个方法只能针对最后一个绘制的图形起作用。
  37.             function Shape(x, y, r){
  38.                 this.x = x;
  39.                 this.y = y;
  40.                 this.r = r;
  42.                 oGC.beginPath();
  43.                 oGC.arc(this.x, this.y, this.r, 0, 360*Math.PI/180, false);
  44.                 oGC.closePath();
  45.                 oGC.fill();
  46.             }
  47.             Shape.prototype.reDraw = function(point){
  48.                 oGC.beginPath();
  49.                 oGC.arc(this.x, this.y, this.r, 0, 360*Math.PI/180, false);
  50.                 oGC.closePath();
  51.                 oGC.fill();
  53.                 if(oGC.isPointInPath(point.x, point.y)){
  54.                     this.click();
  55.                 }
  56.             }
  57.         }
  58.     </script>
  59. </head>
  60. <body>
  61.     <canvas id="c1" width="400" height="400"></canvas>
  62. </body>
  63. </html>

jCanvaScript的绘制和点击操作

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jCanvaScript的使用</title>
  6.     <style>
  7.         body {background: #000; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script src="jCanvaScript.1.5.18.min.js"></script>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d');
  16.             jc.start('c1', true); //开始 把canvas的id传进去 第二个参数代表“重绘”，也就是当有事件的时候，它会重新绘制
  17.             //jc.rect(100, 100, 50, 50, '#ff0000' , true); //画一个方形
  18.             //jc.circle(100, 100, 50, '#ff0000', 1); //画一个圆形
  19.             jc.circle(100, 100, 50, '#ff0000', 1).click(function(){
  20.                 alert(123);
  21.             });
  22.             jc.start('c1'); //闭合
  24.         }
  25.     </script>
  26. </head>
  27. <body>
  28.     <canvas id="c1" width="400" height="400"></canvas>
  29. </body>
  30. </html>

用jCanvaScript实现拖拽

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jCanvaScript的使用</title>
  6.     <style>
  7.         body {background: #000; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script src="jCanvaScript.1.5.18.min.js"></script>
  11.     <script>
  12.         window.onload = function(){
  13.             var oC = document.getElementById('c1');
  14.             var oGC = oC.getContext('2d');
  16.             jc.start('c1', true); 
  17.             jc.circle(100, 100, 50, '#ff0000', 1).draggable();
  18.             jc.start('c1');
  20.         }
  21.     </script>
  22. </head>
  23. <body>
  24.     <canvas id="c1" width="400" height="400"></canvas>
  25. </body>
  26. </html>

通过jCanvaScript让外部按钮控制画布

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jCanvaScript的使用</title>
  6.     <style>
  7.         body {background: #000; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script src="jCanvaScript.1.5.18.min.js"></script>
  11.     <script>
  12.         window.onload = function(){
  13.             var oInput = document.getElementById('input1');
  14.             var oC = document.getElementById('c1');
  15.             var oGC = oC.getContext('2d');
  17.             jc.start('c1', true); 
  18.             jc.circle(100, 100, 50, '#ff0000', 1).id('circle1');
  19.             jc.start('c1');
  21.             oInput.onclick = function(){
  22.                 jc('#circle1').color('#ffff00');
  23.             }
  25.         }
  26.     </script>
  27. </head>
  28. <body>
  29.     <canvas id="c1" width="400" height="400"></canvas>
  30.     <input type="button" value="点击" id="input1">
  31. </body>
  32. </html>

通过jCanvaScript实现运动效果

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jCanvaScript的使用</title>
  6.     <style>
  7.         body {background: #000; color: white; font-size: 30px;}
  8.         #c1 {background: #fff;}
  9.     </style>
  10.     <script src="jCanvaScript.1.5.18.min.js"></script>
  11.     <script>
  12.         window.onload = function(){
  13.             var oInput = document.getElementById('input1');
  14.             var oC = document.getElementById('c1');
  15.             var oGC = oC.getContext('2d');
  17.             jc.start('c1', true); 
  18.             jc.circle(100, 100, 50, '#ff0000', 1).id('circle1');
  19.             jc.start('c1');
  21.             oInput.onclick = function(){
  22.                 jc('#circle1').color('#ffff00').animate({x: 200, y: 200, radius: 5}, 2000);
  23.             }
  25.         }
  26.     </script>
  27. </head>
  28. <body>
  29.     <canvas id="c1" width="400" height="400"></canvas>
  30.     <input type="button" value="点击" id="input1">
  31. </body>
  32. </html>

简易祖玛小游戏

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>简易祖玛小游戏</title>
  6.     <style>
  7.         * {margin: 0; padding: 0;}
  8.         body {background: black;}
  9.         #div1 {background: white; width: 600px; margin: 20px auto;}
  10.     </style>
  11.     <script>
  12.         window.onload = function(){
  14.             var oC = document.getElementById('c1');
  15.             var oGC = oC.getContext('2d');
  16.             var i = 0;
  18.             var yImg = new Image();
  19.             yImg.src = 'person.png';
  20.             yImg.onload = function(){
  22.                 setInterval(function(){
  24.                     oGC.clearRect(0, 0, oC.width, oC.height);
  26.                     oGC.beginPath();
  27.                     oGC.arc(300, 200, 200, -90*Math.PI/180, 180*Math.PI/180, false);
  28.                     oGC.stroke();
  30.                     oGC.beginPath();
  31.                     oGC.arc(250, 200, 150, 180*Math.PI/180, 360*Math.PI/180);
  32.                     oGC.stroke();
  34.                     oGC.beginPath();
  35.                     oGC.arc(400, 200, 20, 0, 360*Math.PI/180);
  36.                     oGC.stroke();
  38.                     for(var i=0; i<ball.length; i++){
  39.                         oGC.beginPath();
  40.                         oGC.moveTo(ball[i].x, ball[i].y);
  41.                         oGC.arc(ball[i].x, ball[i].y, 20, 0, 360*Math.PI/180, false);
  42.                         oGC.fill();
  43.                     }
  45.                     oGC.save()
  46.                     oGC.translate(300, 200);
  47.                     oGC.rotate(iRotate);
  48.                     oGC.translate(-40, -40);
  49.                     oGC.drawImage(yImg, 0, 0);
  50.                     oGC.restore();
  52.                     for(var i=0; i<bullet.length; i++){
  54.                         oGC.save();
  55.                         oGC.fillStyle = 'red';
  56.                         oGC.beginPath();
  57.                         oGC.moveTo(bullet[i].x, bullet[i].y);
  58.                         oGC.arc(bullet[i].x, bullet[i].y, 20, 0, 360*Math.PI/180, false);
  59.                         oGC.fill();
  60.                         oGC.restore();
  61.                     }
  63.                     oGC.save();
  64.                     oGC.font = '60px impact';
  65.                     oGC.textBaseline = 'top';
  66.                     oGC.fillStyle = 'red';
  67.                     oGC.shadowOffsetX = 10;
  68.                     oGC.shadowOffsetY = 10;
  69.                     oGC.shadowColor = 'green';
  70.                     oGC.shadowBlur = 5;
  71.                     var w = oGC.measureText('简易祖玛').width;
  72.                     var h = 60;
  73.                     oGC.fillText('简易祖玛', (oC.width-w)/2, 450);
  74.                     oGC.restore();
  76.                 }, 1000/60);
  78.                 setInterval(function(){
  79.                     for(var i=0; i<ball.length; i++){
  80.                         ball[i].num++;
  81.                         if(ball[i].num == 270){
  82.                             ball[i].r = 150;
  83.                             ball[i].startX = 250;
  84.                             ball[i].startY = 50;
  85.                         }
  87.                         if(ball[i].num == 270 + 180){
  88.                             alert('游戏结束');
  89.                             window.location.reload(); //刷新一下页面
  90.                         }
  91.                         ball[i].x = Math.sin(ball[i].num*Math.PI/180) * ball[i].r + ball[i].startX;
  92.                         ball[i].y = ball[i].r - Math.cos(ball[i].num*Math.PI/180) * ball[i].r + ball[i].startY;
  93.                     }
  95.                     for(var i=0; i<bullet.length; i++){
  96.                         bullet[i].x = bullet[i].x + bullet[i].sX;
  97.                         bullet[i].y = bullet[i].y + bullet[i].sY;
  98.                     }
  100.                     for(var i=0; i<bullet.length; i++){
  101.                         for(var j=0; j<ball.length; j++){
  102.                             if(pz(bullet[i].x, bullet[i].y, ball[j].x, ball[j].y)){
  103.                                 bullet.splice(i, 1);
  104.                                 ball.splice(j, 1);
  105.                                 break;
  106.                             }
  107.                         }
  108.                     }
  110.                 }, 30)
  112.                 var ball = [];
  113.                 ball[0] = {
  114.                     x : 300,
  115.                     y : 0,
  116.                     r : 200,
  117.                     num : 0, //角度
  118.                     startX : 300,
  119.                     startY : 0
  120.                 };
  122.                 setInterval(function(){
  123.                     ball.push({
  124.                         x : 300,
  125.                         y : 0,
  126.                         r : 200,
  127.                         num : 0, //角度
  128.                         startX : 300,
  129.                         startY : 0
  130.                     })
  131.                 }, 350);
  133.                 var iRotate = 0;
  134.                 oC.onmousemove = function(ev){
  136.                     var ev = ev || window.event;
  137.                     var x = ev.clientX - oC.offsetLeft;
  138.                     var y = ev.clientY - oC.offsetTop;
  140.                     var a = x - 300;
  141.                     var b = y - 200;
  143.                     var c = Math.sqrt(a*a + b*b);
  144.                     if(a>0 && b>0){
  145.                         iRotate = Math.asin(b/c) + 90*Math.PI/180;
  146.                     } else if(a>0){
  147.                         iRotate = Math.asin(a/c);
  148.                     }
  151.                     if(a<0 && b>0){
  152.                         iRotate = -(Math.asin(b/c) + 90*Math.PI/180);
  153.                     } else if(a<0){
  154.                         iRotate = Math.asin(a/c);
  155.                     }
  156.                 }
  158.                 var bullet = [];
  159.                 oC.onmousedown = function(ev){
  161.                     var ev = ev || window.event;
  162.                     var x = ev.clientX - oC.offsetLeft;
  163.                     var y = ev.clientY - oC.offsetTop;
  165.                     var a = x - 300;
  166.                     var b = y - 200;
  168.                     var c = Math.sqrt(a*a + b*b);
  169.                     var speed = 5;
  170.                     var sX = speed * a/c;
  171.                     var sY = speed * b/c;
  173.                     bullet.push({
  174.                         x : 300,
  175.                         y : 200,
  176.                         sX : sX,
  177.                         sY : sY
  178.                     });
  179.                 }
  180.             }
  182.             function pz(x1, y1, x2, y2){ //球的碰撞检测 检测两个圆心之间的距离是否小于两个圆半径之和
  183.                 var a = x1 - x2;
  184.                 var b = y1 - y2;
  185.                 var c = Math.sqrt(a*a + b*b);
  187.                 if(c<40){
  188.                     return true;
  189.                 } else {
  190.                     return false;
  191.                 }
  192.             }
  194.         }
  195.     </script>
  196. </head>
  197. <body>
  198.     <div id="div1">
  199.         <canvas id="c1" width="600" height="600"></canvas>
  200.     </div>
  201. </body>
  202. </html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注