首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

canvas知识总结

Posted in Javascript onJanuary 25, 2017

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知识总结

- Author -

13611606223

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
jQuery 瀑布流 浮动布局（一）(延迟AJAX加载图片)
May 23 Javascript
js中的scroll和offset 使用比较的实例与分析
Sep 29 Javascript
js 将json字符串转换为json对象的方法解析
Nov 13 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
使用jquery清空、复位整个输入域
Apr 02 Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 Javascript
基于JavaScript实现自定义滚动条
Jan 25 #Javascript
基于javascript实现数字英文验证码
Jan 25 #Javascript
js阻止移动端页面滚动的两种方法
Jan 25 #Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 #Javascript
json数据处理及数据绑定
Jan 25 #Javascript
详解jQuery中ajax.load()方法
Jan 25 #Javascript
js实现鼠标左右移动，图片也跟着移动效果
Jan 25 #Javascript
GZIP(2) MVCC(4) DBLink(1) 复读(1) .NET Framework(2) 磁盘分区(1) IIS7(1) 事务并发(1) FTP服务器(1) 幻读(5)
You might like
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
PHP使用 Imagick 扩展实现图片合成，圆角处理功能示例
2019/09/09 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
常用参考资料（手册）下载或者链接
2006/07/22 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
实现jquery放大镜的两种方法
2018/02/22 jQuery
vue实现word，pdf文件的导出功能
2018/07/31 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
pandas 空数据处理方法详解
2019/11/02 Python
Python通过format函数格式化显示值
2020/10/17 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
联想阿根廷官方网站：Lenovo Argentina
2019/10/14 全球购物
会计学生自我鉴定
2014/02/06 职场文书
安全生产实施方案
2014/02/23 职场文书
出租房屋协议书
2014/09/14 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
初中重阳节活动总结
2015/05/05 职场文书
民事二审代理词
2015/05/25 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
pytorch--之halfTensor的使用详解
2021/05/24 Python
MySQL插入数据与查询数据
2022/03/25 MySQL