joe

canvas使用

1. 用JavaScript画出一个画布

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
<!-- 创建一个宽500高300的画布 -->
  <canvas id="demo" width=500 height="300"></canvas>
 
  <script>
  // 获取某个canvas标签
  var canvas = document.getElementById("demo");
  // 设置背景颜色
  canvas.style.backgroundColor = 'pink';
  // 设置边框
  canvas.style.border = "1px solid #000";
 
  </script>
</body>
</html>


2. 需要注意的地方

  • canvas不具备绘图功能，图形的绘制必须用JavaScript来完成；

  • canvas画布的大小不能用CSS来设置，因为这样只会进行同比缩放，并不会把画布变大；

  • 可以通过style属性给canvas设置背景色，边框等；

  • 如果不设置canvas的width和height则默认为300*150（不能通过canvas的style属性设置



3. 用JavaScript设置画布的宽，高，边框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
  <canvas id="demo"></canvas>
 
  <script>
  // 获取canvas
    var demo = document.getElementById("demo");
    // 设置宽度
    demo.width = 300 ;
    // 设置高度
    demo.height = 200 ;
    // 设置边框
    demo.style.border = "1px solid blue" ;
 
  </script>
</body>
</html>

4 画一条直线

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
  <canvas id="demo"></canvas>
 
  <script>
  // 获取canvas
    var demo = document.getElementById("demo");
    // 设置宽度
    demo.width = 300 ;
    // 设置高度
    demo.height = 200 ;
    // 设置边框
    demo.style.border = "1px solid blue" ;
 
    // 得到控制权，绘制2D图形
    var ctx = demo.getContext("2d");
    // 找到起始点，第一个数是X轴，第二个数是Y轴。往右和下都是正方向；
    ctx.moveTo(100,100);
    // 线的结束点
    ctx.lineTo(200,100);
    // 将线描边
    ctx.stroke();
 
  </script>
</body>
</html>

5. 画一个线段 ctx.moveTo()和ctx.lineTo()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
  <canvas id="demo"></canvas>
 
  <script>
  // 获取canvas
    var demo = document.getElementById("demo");
    // 设置宽度
    demo.width = 300 ;
    // 设置高度
    demo.height = 300 ;
    // 设置边框
    demo.style.border = "1px solid blue" ;
    var a = document.m
 
    // 得到控制权，绘制2D图形
    var ctx = demo.getContext("2d");
 
    // 找到起始点，第一个数是X轴，第二个数是Y轴。往右和下都是正方向；
    ctx.moveTo(100,100);
    // 线的结束点
    ctx.lineTo(200,100);
    ctx.lineTo(100,200);
    // 将线描边
    ctx.stroke();
 
  </script>
</body>
</html>

6. 将所画的线段闭合 ctx.closePath()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
  <canvas id="demo"></canvas>
 
  <script>
  // 获取canvas
    var demo = document.getElementById("demo");
    // 设置宽度
    demo.width = 300 ;
    // 设置高度
    demo.height = 300 ;
    // 设置边框
    demo.style.border = "1px solid blue" ;
    var a = document.m
 
    // 得到控制权，绘制2D图形
    var ctx = demo.getContext("2d");
 
    // 找到起始点，第一个数是X轴，第二个数是Y轴。往右和下都是正方向；
    ctx.moveTo(100,100);
    // 线的结束点
    ctx.lineTo(200,100);
    ctx.lineTo(100,200);
    // 自动将线段闭合
    ctx.closePath();
    // 将线描边
    ctx.stroke();
 
  </script>
</body>
</html>

7.设置描边的颜色 ctx.strokeStyle = "blue";

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
  <canvas id="demo"></canvas>
 
  <script>
  // 获取canvas
    var demo = document.getElementById("demo");
    // 设置宽度
    demo.width = 300 ;
    // 设置高度
    demo.height = 300 ;
    // 设置边框
    demo.style.border = "1px solid blue" ;
    var a = document.m
 
    // 得到控制权，绘制2D图形
    var ctx = demo.getContext("2d");
 
    // 找到起始点，第一个数是X轴，第二个数是Y轴。往右和下都是正方向；
    ctx.moveTo(100,100);
    // 线的结束点
    ctx.lineTo(200,100);
    ctx.lineTo(100,200);
    // 自动将线段闭合
    ctx.closePath();
    // 设置描边的颜色
    ctx.strokeStyle = "blue";
    // 将线描边
    ctx.stroke();
 
  </script>
</body>
</html>

8. 给绘制的区域设置填充色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
  <canvas id="demo"></canvas>
 
  <script>
  // 获取canvas
    var demo = document.getElementById("demo");
    // 设置宽度
    demo.width = 300 ;
    // 设置高度
    demo.height = 300 ;
    // 设置边框
    demo.style.border = "1px solid blue" ;
    var a = document.m
 
    // 得到控制权，绘制2D图形
    var ctx = demo.getContext("2d");
 
    // 找到起始点，第一个数是X轴，第二个数是Y轴。往右和下都是正方向；
    ctx.moveTo(100,100);
    // 线的结束点
    ctx.lineTo(200,100);
    ctx.lineTo(100,200);
    // 自动将线段闭合
    ctx.closePath();
    // 设置描边的颜色
    ctx.strokeStyle = "blue";
    // 设置填充色
    ctx.fillStyle = "yellow";
    // 将线描边
    ctx.stroke();
    // 给绘制的区域一个填充颜色
    ctx.fill();
 
  </script>
</body>
</html>

9. 设置描边的宽度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
  <canvas id="demo"></canvas>
 
  <script>
  // 获取canvas
    var demo = document.getElementById("demo");
    // 设置宽度
    demo.width = 300 ;
    // 设置高度
    demo.height = 300 ;
    // 设置边框
    demo.style.border = "1px solid blue" ;
    var a = document.m
 
    // 得到控制权，绘制2D图形
    var ctx = demo.getContext("2d");
 
    // 找到起始点，第一个数是X轴，第二个数是Y轴。往右和下都是正方向；
    ctx.moveTo(100,100);
    // 线的结束点
    ctx.lineTo(200,100);
    ctx.lineTo(100,200);
    // 自动将线段闭合
    ctx.closePath();
    // 设置描边的颜色
    ctx.strokeStyle = "blue";
    // 设置描边的宽度
    ctx.lineWidth = 5 ;
    // 设置填充色
    ctx.fillStyle = "yellow";
    // 将线描边
    ctx.stroke();
    // 给绘制的区域一个填充颜色
    ctx.fill();
 
  </script>
</body>
</html>

10. 画多条直线

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
<canvas id="demo"></canvas>
 
  <script>
  var demo = document.getElementById("demo");
  demo.width = 300 ;
  demo.height = 300 ;
  demo.style.border = "2px solid blue";
 
  // 取得控制权,绘制2D图形
  var ctx = demo.getContext("2d");
 
  ctx.moveTo(100,100);
  ctx.lineTo(100,200);
 
  ctx.moveTo(200,100);
  ctx.lineTo(200,200);
 
  //描边
  ctx.stroke();
 
  </script>
</body>
</html>

11. 画多条直线，每条直线颜色不一样

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
<canvas id="demo"></canvas>
 
  <script>
  var demo = document.getElementById("demo");
  demo.width = 500 ;
  demo.height = 300 ;
  demo.style.border = "2px solid blue";
 
  // 取得控制权,绘制2D图形
  var ctx = demo.getContext("2d");
 
  ctx.moveTo(100,100);
  ctx.lineTo(100,200);
  ctx.strokeStyle = "red";
  ctx.stroke();
 
  ctx.beginPath();  //从新绘图，与前面无关，不然会将上面图形再画一次
  ctx.moveTo(200,100);
  ctx.lineTo(200,200);
  ctx.strokeStyle = "pink";
  ctx.stroke();
 
  ctx.beginPath();
  ctx.moveTo(300,100);
  ctx.lineTo(300,200);
  ctx.strokeStyle = "blue";
  ctx.stroke();
 
 
  </script>
</body>
</html>

12. 画一个矩形 ctx.rect(x,y,width,height);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
<canvas id="demo"></canvas>
 
  <script>
  var demo = document.getElementById("demo");
  demo.width = 500 ;
  demo.height = 500 ;
  demo.style.border = "2px solid blue";
  // 取得控制权,绘制2D图形
  var ctx = demo.getContext("2d");
 
  // 画矩形
  ctx.rect(100,200,300,200);
  // 描边
  ctx.stroke();
 
  </script>
</body>
</html>

13. 画一个矩形自带描边 ctx.strokeRect(x,y,width,height);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>canvas</title>
</head>
<body>
<canvas id="demo"></canvas>
 
  <script>
  var demo = document.getElementById("demo");
  demo.width = 500 ;
  demo.height = 500 ;
  demo.style.border = "2px solid blue";
  // 取得控制权,绘制2D图形
  var ctx = demo.getContext("2d");
//自带描边，画出矩形的同时就会描边 
  ctx.strokeRect(50,100,200,200);
 
  </script>
</body>
</html>

14 绘制圆弧

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise)
x:圆心的x轴
y:圆心的y轴
radius：圆弧的半径
startAngle:起始角度（弧度）
endAngle：终止角度（弧度）
anticlockwise：绘制方向（true:逆时针绘制，false:顺时针绘制）
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>circle</title>
</head>
<body>
<canvas id="demo"></canvas>
 
  <script>
  var demo = document.getElementById("demo");
  demo.width = 600 ;
  demo.height = 600 ;
  demo.style.border = "1px solid blue" ;
  var ctx = demo.getContext("2d");
 
  // 圆心的坐标x:300; y:300; 圆弧半径:100; 起始弧度:0; 终止弧度:pi/3(60°); 顺时针绘制
  ctx.arc(300, 300, 100, 0, (60*Math.PI)/180,false);
  //描边
  ctx.stroke();
 
  </script>
</body>
</html>

15. 将图片放到画布里面

<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>canvas-img</title>  
</head>  
<body>  
<img id="img" src="img/coder.jpg" alt="">  
<canvas id="demo"></canvas>  
  
<script>  
    var img = document.getElementById("img");  
    var demo = document.getElementById("demo");  
  
    demo.width = 800 ;  
    demo.height = 800 ;  
    demo.style.border = "1px solid blue" ;  
    var ctx = demo.getContext("2d");  
  
    img.onload = function () {  
        ctx.drawImage(img,200,100);  
    }  
  
</script>  
  
</body>  
</html>


码字很辛苦，转载请注明来自朱一兵的博客的《canvas使用》
2016-04-24   学习文章

评论