canvas知識まとめ

15080 ワード

canvas

1.基礎知識
canvas元素は画像を描く時、二つの方法があります。


    context.fill()//  
    context.stroke()//

スタイル:図形描画を行う前に、図形描画のスタイルを設定します。


    context.fillStyle//     
    context.strokeStyle//    
    context.lineWidth//

context.arc（センターx円心横左、センターry縦軸、ラジ半径、startingAngle開始弧度値、endingAngle終了弧度値、anticlockwise='false'時計回りデフォルトfalse）
2.塗りつぶしなしの線分を描く


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type="text/css">
 .canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 </style>
 <script>
 window.onload=function(){
    function draw(){
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  canvas.width=300;
  canvas.height=300;
      ctx.beginPath(); //      
    ctx.moveTo(50,50);//    
    ctx.lineTo(100,100);//  1
    ctx.lineTo(50,100);//  2
        ctx.lineTo(50,50);//  3
        ctx.lineWidth=5;//    
        ctx.strokeStyle="red"; //    
        ctx.closePath(); //      
   ctx.stroke();//    
    }else{
     alert('        ，      ');
    }
 }
 draw();
 } 
 </script>
 <style tyrp="text/css">
    canvas{ border: 1px solid black;margin: 0 auto;display: block;}
 </style>
</head>
<body>
 <canvas id="canvas">        ，      </canvas>
</body>
</html>

3.塗りつぶし図を描く


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type="text/css">
 .canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 </style>
 <script>
window.onload=function(){
    function draw(){
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  canvas.width=300;
  canvas.height=300;
      ctx.beginPath(); //      
    ctx.moveTo(50,50);//    
    ctx.lineTo(100,100);//  1
    ctx.lineTo(50,100);//  2
    ctx.lineTo(50,50);//  3
        ctx.fillStyle='red';
        ctx.fill();
        //    
        ctx.lineWidth=5;//    
        ctx.strokeStyle="blue"; //    
        ctx.closePath(); //      
    ctx.stroke();//    
    }else{
     alert('        ，      ');
    }
 }
 draw();
 } 
 </script>
 <style tyrp="text/css">
    canvas{ border: 1px solid black;margin: 0 auto;display: block;}
 </style>
</head>
<body>
 <canvas id="canvas">        ，      </canvas>
</body>
</html>

4.円弧を描く


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type="text/css">
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 </style>
 <script>
 window.onload=function(){
    function draw(){
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  canvas.width=800;
  canvas.height=800;
      ctx.beginPath(); //        
        ctx.lineWidth=5;//    
        ctx.strokeStyle="red"; //    
        ctx.arc(100, 100, 30, 0, 1.5*Math.PI);
        ctx.closePath(); //      ，         ，     
    ctx.stroke();//    
   ctx.beginPath(); //        
        ctx.lineWidth=5;//    
        ctx.strokeStyle="red"; //    
        ctx.arc(200, 100, 30, 0, 2*Math.PI);
        ctx.closePath(); //      ，         ，     
    ctx.stroke();//    

      ctx.beginPath(); //        
        ctx.lineWidth=5;//    
        ctx.strokeStyle="red"; //    
        ctx.arc(300, 100, 30, 0, 0.5*Math.PI);
        ctx.closePath(); //      ，         ，     
    ctx.stroke();//    
   ctx.beginPath(); //        
        ctx.lineWidth=5;//    
        ctx.strokeStyle="red"; //      ，         ，     
        ctx.arc(400, 100, 30, 0, 0.5*Math.PI,true);//  ：0*PI，0.5*PI，1*PI，1。5*PI，2*PI          
        ctx.closePath(); //      
    ctx.stroke();//    
   ctx.beginPath(); //        
        ctx.fillStyle="red"; //    
        ctx.arc(500, 100, 30, 0, 1.5*Math.PI);
        ctx.closePath(); //      ，         ，     
    ctx.fill();//    

    ctx.beginPath(); //        
        ctx.lineWidth=5;//    
        ctx.strokeStyle="red"; //    
        ctx.arc(600, 100, 30, 0, 1.5*Math.PI);
    ctx.stroke();//    
    }else{
     alert('        ，      ');
    }
 }
 draw();
 }
 </script>
</head>
<body>
 <canvas id="canvas">        ，      </canvas>
</body>
</html>

5.長方形を描く


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type="text/css">
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 </style>
 <script>
 window.onload=function(){
    function draw(){
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  canvas.width=500;
  canvas.height=500;
      ctx.fillRect(25,25,100,100);//         
      ctx.clearRect(45,45,60,60);//        ，         
      ctx.strokeRect(50,50,50,50); //         
    }else{
     alert('        ，      ');
    }
 }
 draw();
 } 
 </script>
</head>
<body>
 <canvas id="canvas">        ，      </canvas>
</body>
</html>

6.テキストを描く


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type="text/css">
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 </style>
 <script>
 window.onload=function(){
    function draw(){
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  canvas.width=500;
  canvas.height=500;
      ctx.font = "48px serif";
      ctx.fillText("Hello world", 10, 50);
    }else{
     alert('        ，      ');
    }
 }
 draw();
 } 
 </script>
</head>
<body>
 <canvas id="canvas">        ，      </canvas>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type="text/css">
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 </style>
 <script>
 window.onload=function(){
    function draw(){
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  canvas.width=500;
  canvas.height=500;
      ctx.font = "48px serif";
      ctx.strokeText("Hello world", 10, 50);
    }else{
     alert('        ，      ');
    }
 }
 draw();
 } 
 </script>
</head>
<body>
 <canvas id="canvas">        ，      </canvas>
</body>
</html>

7.画像操作


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script>
 <script src="scripts/lianxi.js"></script>
 <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]-->
 <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]-->
 <style type="text/css">
 canvas{border: 1px solid #000;display: block;margin: 0 auto;margin-top: 50px;}
 </style>
 <script>
 window.onload=function(){
    function draw(){
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  canvas.width=500;
  canvas.height=500;
     var img=new Image();
img.src='http://gzdl.cooco.net.cn/files/down/test/imggzdl/312/15812.jpg'
     img.onload=function(){
      ctx.drawImage(img,0,0);
      ctx.beginPath();
     ctx.moveTo(30,96);
     ctx.lineTo(70,66);
     ctx.lineTo(103,76);
     ctx.lineTo(170,15);
     ctx.stroke();
     }
    }else{
     alert('        ，      ');
    }
 }
 draw();
 } 
 </script>
</head>
<body>
 <canvas id="canvas">        ，      </canvas>
</body>
</html>

以上が本文の全部です。本文の内容は皆さんの学習や仕事に一定の助けをもたらしてくれると同時に、私達を応援してください。

C〓〓の中でArayListの使用方法

C〓〓〓の自動発生のきれいな水晶の効果の顔写真の実現コード