当前位置：移动技术网 > IT编程>开发语言>JavaScript > canvas知识总结

canvas知识总结

2019年03月28日 | 移动技术网IT编程 | 我要评论

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>

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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑

今天在整合smm项目时：遇到两个错误，分享给各位Failed to load or instantiate Ta... [阅读全文]
vert实践五——Json？Protocol Buffer？FlatBuffers？

本节我们来比较一下Json、FlatBuffers、Protocol Buffer在vertx中使用时的占用资源... [阅读全文]
JS可断点续传文件上传实现代码解析

刚开始学习前端开发就碰到文件上传问题，还要求可断点续传。查了很多资料，发现h5的file api刚好可以满足我们的需求，也遇到了一些问题，于是记录下来为有同样需... [阅读全文]
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络

1.数据集验证神经网络2.图片验证神经网络3.说明正文：1.数据集验证神经网络上一篇博文已经训练好了神经网络模型... [阅读全文]
数据转为YOLO的txt数据格式

通过两个类来转换import osfrom xml.etree.ElementTree import dumpi... [阅读全文]
字典、集合、序列

字典用程序解答下面的题目字典的长度是多少请修改’java’ 这个key对应的value值为98删除 c 这个ke... [阅读全文]
06.字典、集合和序列

1.字典练习练习题：字典基本操作字典内容如下:dic = {‘python’: 95,‘java’: 99,‘c... [阅读全文]
多线程爬取狗妈表情包

通过多线程爬取狗妈表情包import requestsimport jsonfrom jsonpath impo... [阅读全文]
Python：数据导出到Excel（使用xlwt）

写在前面：前端ajax调用导出方法，ajax无法导出问题原因：ajax是无法直接导出excel的，因为ajax的... [阅读全文]
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地

爬虫代码如下：运行需要本地开启mongo服务器端，安装有谷歌浏览器及selenium对应版本的驱动文件#codi... [阅读全文]

网友评论


验证码：

canvas知识总结

2019年03月28日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论