canvas知識(shí)總結(jié)

1.基礎(chǔ)知識(shí)

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、重慶小程序開(kāi)發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了安龍免費(fèi)建站歡迎大家使用！

canvas元素繪制圖像的時(shí)候有兩種方法，分別是

    context.fill()//填充
    context.stroke()//繪制邊框

style:在進(jìn)行圖形繪制前，要設(shè)置好繪圖的樣式

    context.fillStyle//填充的樣式
    context.strokeStyle//邊框樣式
    context.lineWidth//圖形邊框?qū)挾?/pre>

context.arc(centerx圓心橫左邊,centery圓心縱坐標(biāo),radius半徑,startingAngle起始弧度值,endingAngle結(jié)束弧度值,anticlockwise='false'順時(shí)針默認(rèn)false)

2.繪制非填充線段

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" > 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="/upload/otherpica42/77539.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(); //一個(gè)繪畫開(kāi)始
    ctx.moveTo(50,50);//線段起點(diǎn)
    ctx.lineTo(100,100);//終點(diǎn)1
    ctx.lineTo(50,100);//終點(diǎn)2
        ctx.lineTo(50,50);//終點(diǎn)3
        ctx.lineWidth=5;//邊框?qū)挾?        ctx.strokeStyle="red"; //邊框樣式
        ctx.closePath(); //一個(gè)繪畫結(jié)束
   ctx.stroke();//繪制線段
    }else{
     alert('當(dāng)前瀏覽器不支持，請(qǐng)更換瀏覽器');
    }
 }
 draw();
 } 
 </script>
 <style tyrp="text/css">
    canvas{ border: 1px solid black;margin: 0 auto;display: block;}
 </style>
</head>
<body>
 <canvas id="canvas">當(dāng)前瀏覽器不支持，請(qǐng)更換瀏覽器</canvas>
</body>
</html>

3.繪制填充圖形

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" > 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="/upload/otherpica42/77539.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(); //一個(gè)繪畫開(kāi)始
    ctx.moveTo(50,50);//線段起點(diǎn)
    ctx.lineTo(100,100);//終點(diǎn)1
    ctx.lineTo(50,100);//終點(diǎn)2
    ctx.lineTo(50,50);//終點(diǎn)3
        ctx.fillStyle='red';
        ctx.fill();
        //邊框添加
        ctx.lineWidth=5;//邊框?qū)挾?        ctx.strokeStyle="blue"; //邊框樣式
        ctx.closePath(); //一個(gè)繪畫結(jié)束
    ctx.stroke();//繪制線段
    }else{
     alert('當(dāng)前瀏覽器不支持，請(qǐng)更換瀏覽器');
    }
 }
 draw();
 } 
 </script>
 <style tyrp="text/css">
    canvas{ border: 1px solid black;margin: 0 auto;display: block;}
 </style>
</head>
<body>
 <canvas id="canvas">當(dāng)前瀏覽器不支持，請(qǐng)更換瀏覽器</canvas>
</body>
</html>

4.繪制圓弧

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" > 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="/upload/otherpica42/77539.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(); //開(kāi)始一個(gè)新的繪畫
        ctx.lineWidth=5;//邊框?qū)挾?        ctx.strokeStyle="red"; //邊框樣式
        ctx.arc(100, 100, 30, 0, 1.5*Math.PI);
        ctx.closePath(); //一個(gè)繪畫結(jié)束，如果繪畫不是封閉的，就封閉起來(lái)
    ctx.stroke();//繪制線段
   ctx.beginPath(); //開(kāi)始一個(gè)新的繪畫
        ctx.lineWidth=5;//邊框?qū)挾?        ctx.strokeStyle="red"; //邊框樣式
        ctx.arc(200, 100, 30, 0, 2*Math.PI);
        ctx.closePath(); //一個(gè)繪畫結(jié)束，如果繪畫不是封閉的，就封閉起來(lái)
    ctx.stroke();//繪制線段

      ctx.beginPath(); //開(kāi)始一個(gè)新的繪畫
        ctx.lineWidth=5;//邊框?qū)挾?        ctx.strokeStyle="red"; //邊框樣式
        ctx.arc(300, 100, 30, 0, 0.5*Math.PI);
        ctx.closePath(); //一個(gè)繪畫結(jié)束，如果繪畫不是封閉的，就封閉起來(lái)
    ctx.stroke();//繪制線段
   ctx.beginPath(); //開(kāi)始一個(gè)新的繪畫
        ctx.lineWidth=5;//邊框?qū)挾?        ctx.strokeStyle="red"; //一個(gè)繪畫結(jié)束，如果繪畫不是封閉的，就封閉起來(lái)
        ctx.arc(400, 100, 30, 0, 0.5*Math.PI,true);//注意：0*PI，0.5*PI，1*PI，1。5*PI，2*PI所占據(jù)的位置是固定的
        ctx.closePath(); //一個(gè)繪畫結(jié)束
    ctx.stroke();//繪制線段
   ctx.beginPath(); //開(kāi)始一個(gè)新的繪畫
        ctx.fillStyle="red"; //邊框樣式
        ctx.arc(500, 100, 30, 0, 1.5*Math.PI);
        ctx.closePath(); //一個(gè)繪畫結(jié)束，如果繪畫不是封閉的，就封閉起來(lái)
    ctx.fill();//繪制填充

    ctx.beginPath(); //開(kāi)始一個(gè)新的繪畫
        ctx.lineWidth=5;//邊框?qū)挾?        ctx.strokeStyle="red"; //邊框樣式
        ctx.arc(600, 100, 30, 0, 1.5*Math.PI);
    ctx.stroke();//繪制線段
    }else{
     alert('當(dāng)前瀏覽器不支持，請(qǐng)更換瀏覽器');
    }
 }
 draw();
 }
 </script>
</head>
<body>
 <canvas id="canvas">當(dāng)前瀏覽器不支持，請(qǐng)更換瀏覽器</canvas>
</body>
</html>

5.繪制矩形

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" > 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="/upload/otherpica42/77539.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);//繪制一個(gè)填充的矩形
      ctx.clearRect(45,45,60,60);//清除指定矩形區(qū)域，讓清除部分完全透明
      ctx.strokeRect(50,50,50,50); //繪制一個(gè)矩形的邊框
    }else{
     alert('當(dāng)前瀏覽器不支持，請(qǐng)更換瀏覽器');
    }
 }
 draw();
 } 
 </script>
</head>
<body>
 <canvas id="canvas">當(dāng)前瀏覽器不支持，請(qǐng)更換瀏覽器</canvas>
</body>
</html>

6.繪制文本

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" > 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="/upload/otherpica42/77539.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('當(dāng)前瀏覽器不支持，請(qǐng)更換瀏覽器');
    }
 }
 draw();
 } 
 </script>
</head>
<body>
 <canvas id="canvas">當(dāng)前瀏覽器不支持，請(qǐng)更換瀏覽器</canvas>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" > 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="/upload/otherpica42/77539.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('當(dāng)前瀏覽器不支持，請(qǐng)更換瀏覽器');
    }
 }
 draw();
 } 
 </script>
</head>
<body>
 <canvas id="canvas">當(dāng)前瀏覽器不支持，請(qǐng)更換瀏覽器</canvas>
</body>
</html>

7.圖片操作

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title></title>
 <link rel="stylesheet" > 
 <link rel="stylesheet" href="styles/lianxi.css">
 <script src="/upload/otherpica42/77539.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='/upload/otherpica42/77540.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('當(dāng)前瀏覽器不支持，請(qǐng)更換瀏覽器');
    }
 }
 draw();
 } 
 </script>
</head>
<body>
 <canvas id="canvas">當(dāng)前瀏覽器不支持，請(qǐng)更換瀏覽器</canvas>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！

分享文章：canvas知識(shí)總結(jié)
路徑分享：http://muchs.cn/article42/iidoec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、服務(wù)器托管、、網(wǎng)站排名、云服務(wù)器、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

營(yíng)銷型網(wǎng)站建設(shè)