canvas知识总结

更新时间：2017年01月25日 11:23:23 作者：13611606223

本文主要介绍了canvas的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧

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="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>

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

您可能感兴趣的文章:

canvas

javascript监听页面刷新和页面关闭事件方法详解
本文主要介绍了javascript监听页面刷新和页面关闭事件的方法，具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
基于JavaScript实现动态添加删除表格的行
又一个动态控制表格的效果，用JavaScript动态生成表格行、表格列，以及还可动态删除这些行列，行等，运行代码后，点击对应的功能按钮，即可实现对应的表格操作功能，接下来通过代码实例给大家介绍JavaScript实现动态添加删除表格的行，需要的朋友参考下
2016-02-02
如何将JS的变量值传递给ASP变量
asp作为主页面，外接一个js的，我想知道一下能否在js里面调用asp的变量值，如果能这些值是怎么传递过去的呢？本文将提供解决方法，需要的朋友可以参考下
2012-12-12
批量实现面向对象的实例代码
本文为大家详细介绍下面向对象的继承以及如何实现批量实现面向对象，感兴趣的可以参考下哈，希望对大家有所帮助
2013-07-07
基于JavaScript实现粒子流动效果
这篇文章主要为大家详细介绍了如何通过JavaScript实现粒子流动效果,文中的示例代码讲解详细,具有一定的参考价值,感兴趣的小伙伴可以参考一下
2023-09-09
JS下载文件|无刷新下载文件示例代码
JS下载文件的实现在网上可以找到很多教程，不过本文为大家介绍的是无刷新下载文件，貌似更酷一点是吧
2014-04-04
JS打开摄像头并截图上传示例
本篇文章主要介绍了JS打开摄像头并截图上传示例，详细JS打开摄像头并截图上传至后端的一个完整步骤，有兴趣的同学可以了解一下。
2017-02-02
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
这篇文章主要介绍了JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面的代码，代码比较简单，好理解，需要的朋友可以参考下
2016-08-08
js实现简单五子棋游戏
这篇文章主要为大家详细介绍了js实现简单五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
echarts实现折线图的拖拽效果
这篇文章主要为大家详细介绍了echarts实现折线图的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12

canvas知识总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具