首页
所有分类
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 相关文章推荐
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
layui table 多行删除(id获取)的方法
Sep 12 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
德劲1103(3) 德生PL330(2) 根德(2) 松下(1) ICF-SW7600GR(1) 德生9700DX(1) ICF-SW55(1) PHILIPS(3) Panasonic(1) SRF-S84(1)
You might like
php获取qq用户昵称和在线状态（实例分析）
2013/10/27 PHP
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
[01:20]2018DOTA2亚洲邀请赛总决赛战队LGD晋级之路
2018/04/07 DOTA
[00:56]PWL开团时刻DAY8——追追追追追！
2020/11/09 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
Python中字符串的修改及传参详解
2016/11/30 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
通过cmd进入python的步骤
2020/06/16 Python
python 5个顶级异步框架推荐
2020/09/09 Python
VICHY薇姿英国官网：全球专业敏感肌护肤领先品牌
2017/07/04 全球购物
墨西哥巴士车票在线购买：ClickBus
2018/03/27 全球购物
将时尚融入珠宝：Adornmonde
2019/10/17 全球购物
五一服装活动方案
2014/01/11 职场文书
文化产业实施方案
2014/06/07 职场文书
药剂专业求职信
2014/06/20 职场文书
公司证明怎么写
2014/09/22 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
正能量励志演讲稿三分钟（范文）
2019/07/11 职场文书