canvas知识总结

发布时间：2020-10-13 23:05:41 来源：脚本之家阅读：130 作者：13611606223 栏目：web开发

1.基础知识

canvas元素绘制图像的时候有两种方法，分别是

    context.fill()//填充
    context.stroke()//绘制边框

style:在进行图形绘制前，要设置好绘图的样式

    context.fillStyle//填充的样式
    context.strokeStyle//边框样式
    context.lineWidth//图形边框宽度

context.arc(centerx圆心横左边,centery圆心纵坐标,radius半径,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="https://cache.yisu.com/upload/information/20200622/114/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(); //一个绘画开始
    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="https://cache.yisu.com/upload/information/20200622/114/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(); //一个绘画开始
    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="https://cache.yisu.com/upload/information/20200622/114/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(); //开始一个新的绘画
        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="https://cache.yisu.com/upload/information/20200622/114/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);//绘制一个填充的矩形
      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="https://cache.yisu.com/upload/information/20200622/114/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('当前浏览器不支持，请更换浏览器');
    }
 }
 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="https://cache.yisu.com/upload/information/20200622/114/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('当前浏览器不支持，请更换浏览器');
    }
 }
 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="https://cache.yisu.com/upload/information/20200622/114/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='https://cache.yisu.com/upload/information/20200622/114/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('当前浏览器不支持，请更换浏览器');
    }
 }
 draw();
 } 
 </script>
</head>
<body>
 <canvas id="canvas">当前浏览器不支持，请更换浏览器</canvas>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持亿速云！

向AI问一下细节

canvas知识总结

猜你喜欢

最新资讯

相关推荐

相关标签