首页
所有分类
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 相关文章推荐
读jQuery之十三 添加事件和删除事件的核心方法
Aug 23 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 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
根德5570(1) AN-LP1(1) DE1103(2) DE1107(3) DE1105(1) ICF-903L(1) 239军机(1) frg-100(1) YAESU(1) SONY600GR(1)
You might like
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
php中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
JS通过分析userAgent属性来判断浏览器的类型及版本
2014/03/28 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
Python的print用法示例
2014/02/11 Python
Python修改MP3文件的方法
2015/06/15 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
使用Python开发SQLite代理服务器的方法
2018/12/07 Python
用python实现刷点击率的示例代码
2019/02/21 Python
django云端留言板实例详解
2019/07/22 Python
python根据多个文件名批量查找文件
2019/08/13 Python
python绘制玫瑰的实现代码
2020/03/02 Python
在Django中自定义filter并在template中的使用详解
2020/05/19 Python
应届生自我鉴定
2013/12/11 职场文书
物流专员岗位职责
2014/02/17 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang