Canvas

Posted zhoulifei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Canvas相关的知识,希望对你有一定的参考价值。

一、了解html5

1、什么是HTML5

以前:HTML5就是HTML的第五个版本

但是现在大众理解的HTML5是炫酷吊炸天的特效,那通过以下几种技术组合而成

 

2、发展史

 

3、目前支持HTML5的浏览器

 

4、HTML5的推广网站

 

二、泛HTML5学习分类

1、HTML5标签

 

2、CSS3

 

 

3、javascript

http://www.jb51.net/article/78474.htm

 

HTML5本地存储

HTML5上传文件

canvas API

 

 

三、Canvas简介

1、是什么

Canvas是HTML5新增的一个双标签,目的在页面设置一个画布,可以进行画任何的线、图形、填充等一系列的操作,操作画图的是js。另外Canvas不仅仅提供简单的二维矢量绘图,也提供了三维的绘图,以及图片处理等一系列的api支持。

 

2、初体验Canvas

 

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Document</title>

</head>

<body>

   <canvas width="800" height="400" id="canvas" style="background: red;">

   对不起,您已经OUT了,赶快升级吧

   </canvas>

</body>

</html>

n  说明:

n  canvas用于设置画布,默认固定添加三个属性分别为:widht、height、id

n  canvas默认是白色背景,我们可以通过行内样式来设置背景颜色

3、Canvas绘制步骤

n  新建HTML页面,创建canvas标签(注:三个属性)

n  通过JS获取canvas DOM节点对象

n  通过canvas节点对象的方法获取【绘制环境对象】

n  最后,通过【绘制环境对象】调用HTML5 API来完成功能

http://www.w3school.com.cn/tags/html_ref_canvas.asp

 

4、创建绘图环境对象

n  创建canvas标签

n  获取canvas节点对象

n  获取绘图环境对象

 

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Document</title>

</head>

<body>

   <canvas width="800" height="400" id="canvas" style="background: red;">

   对不起,您已经OUT了,赶快升级吧

   </canvas>

   <script>

   //1.获取canvas节点对象

   var canvasObj = document.getElementById(‘canvas‘);

   //2.创建绘制环境对象

   var extObj = canvasObj.getContext(‘2d‘);

   alert(extObj);

   </script>

</body>

</html>

四、Canvas简单操作(画一条直线)

思考

在显示生活中,通过纸和笔明确起始点一直拖拽到终点

步骤

v  确定起始点

v  确定终点

v  绘制

API说明

extObj.moveTo(x坐标,y坐标);   确定起始位置

extObj.lineTo(x坐标,y坐标);     确定终点位置

extObj.stroke()                  绘图

代码

 

<!DOCTYPE html>

<html lang="en">

<head>

     <meta charset="UTF-8">

     <title>Document</title>

</head>

<body>

     <canvas width="800" height="300" id="canvas" style="background: yellow">

     不支持

     </canvas>

     <script type="text/javascript">

     //1.获取canvas节点对象

     var canvasObj = document.getElementById(‘canvas‘);

     //2.绘制环境对象

     var extObj = canvasObj.getContext(‘2d‘);

         

     //3.定义起始位置

     extObj.moveTo(20, 40);

     //4.定义终点位置

     extObj.lineTo(200, 200);

     //5.绘制

     extObj.stroke();

     </script>

</body>

</html>

自定义宽度和颜色

 

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Document</title>

</head>

<body>

   <canvas width="800" height="300" id="canvas" style="background: yellow">不支持</canvas>

   <script type="text/javascript">

   //1.获取canvas节点对象

   var canvasObj = document.getElementById(‘canvas‘);

   //2.绘制环境对象

   var extObj = canvasObj.getContext(‘2d‘);

      //2.1设置画笔粗细

      extObj.lineWidth = 10;

      //2.2设置画笔颜色

      extObj.strokeStyle = ‘#fff‘;

   //3.定义起始位置

   extObj.moveTo(20, 40);

   //4.定义终点位置

   extObj.lineTo(200, 200);

   //5.绘制

   extObj.stroke();

   </script>

</body>

</html>

 

五、Canvas简单操作(画一个圆)

步骤

n  明确圆形

n  半径

API说明

cxtObj.arc(x坐标,y坐标,半径,起始角度,结束角度,绘制方向:false-顺时针,true-逆时针)

脚下留心:

起始角度和结束角度,不是说些1~360度,而是通过Math.PI来代替指半个圆,2*Math.PI指一个圆,1.5*Math.PI四分之三圆

代码

 

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Document</title>

</head>

<body>

   <canvas width="800" height="400" id="canvas" style="background: red;">

   对不起</canvas>

   <script type="text/javascript">

   //1.获取canvas节点对象

   var canvasObj = document.getElementById(‘canvas‘);

   //2.创建绘图环境对象

   var cxtObj = canvasObj.getContext(‘2d‘);

      cxtObj.lineWidth = 8

   //定义圆

   cxtObj.arc(150, 150, 50, 0, 2*Math.PI, false);

   cxtObj.stroke();

   </script>

</body>

</html>

练习:绘制两个圆

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas width="800" height="400" id="canvas" style="background: red;">

    对不起

    </canvas>

    <script type="text/javascript">

    //1.获取canvas节点对象

    var canvasObj = document.getElementById(‘canvas‘);

    //2.创建绘图环境对象

    var cxtObj = canvasObj.getContext(‘2d‘);

 

         cxtObj.lineWidth = 8

 

    //定义圆

    cxtObj.arc(150, 150, 50, 0, 2*Math.PI, false);

    cxtObj.stroke();

    cxtObj.closePath();

 

    cxtObj.beginPath();

    cxtObj.arc(350, 150, 50, 0, 2*Math.PI, false);

    cxtObj.stroke();

 

    </script>

</body>

</html>

脚下留心:通过路径绘制图案必须上一个图案绘制完毕必须关闭路径,下一个路径开始必须开始新路径。通过API  closePath()和beginPath();

 

填充颜色

n  API说明

cxtObj.fillStyle = 值;   设置颜色值;

cxtObj.fill();  填充,默认填充黑色

n  代码

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas width="800" height="400" id="canvas" style="background: red;">对不起</canvas>

    <script type="text/javascript">

    //1.获取canvas节点对象

    var canvasObj = document.getElementById(‘canvas‘);

    //2.创建绘图环境对象

    var cxtObj = canvasObj.getContext(‘2d‘);

 

         cxtObj.lineWidth = 8

 

    //定义圆

    cxtObj.arc(150, 150, 50, 0, 2*Math.PI, false);

    //绘制

    cxtObj.stroke();

    //关闭当前绘制路径

    cxtObj.closePath();

 

    //开启新的绘制路径

    cxtObj.beginPath();

    //定义圆

    cxtObj.arc(350, 150, 50, 0, 2*Math.PI, false);

    //绘制

    cxtObj.stroke();

 

    //设置填充样式

    cxtObj.fillStyle = ‘yellow‘;

    //填充

    cxtObj.fill();

 

    </script>

</body>

</html>

六、Canvas简单操作(画一个矩形)

步骤

n  明确起始位置

n  明确宽度

n  明确高度

API说明

cxtObj.rect(x坐标,y坐标,宽度,高度)

代码

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <canvas width="800" height="400" id="canvas" style="background: red;">对不起</canvas>

    <script type="text/javascript">

    //1.获取canvas节点对象

    var canvasObj = document.getElementById(‘canvas‘);

    //2.创建绘图环境对象

    var cxtObj = canvasObj.getContext(‘2d‘);

 

         //2.设置画笔粗心

         cxtObj.lineWidth = 8

 

    //定义矩形

    cxtObj.rect(100, 200, 300, 100);

    //绘制

    cxtObj.stroke();

 

    //填充白色

    cxtObj.fillStyle = ‘#fff‘;

    //填充

    cxtObj.fill();

    </script>

</body>

</html>

 

七、Canvas简单操作(写一段文字画布中)

步骤

n  明确写入内容

n  明确x坐标

n  明确y坐标

API说明

cxtObj.fillText(文字,x坐标,y坐标)

代码

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>画一个矩形</title>

</head>

<body>

    <canvas width="800" height="400" id="canvas" style="background: red;">对不起</canvas>

    <script type="text/javascript">

    //1.创建canvas节点对象

    var canvasObj = document.getElementById(‘canvas‘);

    //2.创建绘画环境对象

    var cxtObj = canvasObj.getContext(‘2d‘);

 

    cxtObj.font = ‘30px 黑体‘

    //定义文字信息(填充的)

    cxtObj.fillText(‘没有程序员鼓励师,不编程!‘, 80, 40);

    //写不填充的字体

    cxtObj.strokeText(‘没有程序员鼓励师,不编程!‘, 80, 80);

    //写入画布

    cxtObj.stroke();

    </script>

</body>

</html>

八、Canvas简单操作(将一幅图片添加到画布中)

步骤

n  明确图片

n  明确x坐标和y坐标

n  明确宽度和高度

API说明

cxtObj.drawImage(图片对象,x坐标,y坐标,宽度,高度)

代码

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>画一个矩形</title>

</head>

<body>

    <canvas width="800" height="400" id="canvas" style="background: red;">对不起</canvas>

    <script type="text/javascript">

    //1.创建canvas节点对象

    var canvasObj = document.getElementById(‘canvas‘);

    //2.创建绘画环境对象

    var cxtObj = canvasObj.getContext(‘2d‘);

 

    cxtObj.font = ‘30px 黑体‘

    //定义文字信息(填充的)

    cxtObj.fillText(‘没有程序员鼓励师,不编程!‘, 80, 40);

    //写不填充的字体

    cxtObj.strokeText(‘没有程序员鼓励师,不编程!‘, 80, 80);

    //写入画布

    cxtObj.stroke();

 

    //写入图片

    var imgObj = document.createElement(‘img‘);

    imgObj.src = ‘woman.jpg‘;

    //定义写入图片语法

    cxtObj.drawImage(imgObj, 80, 120, 300, 400);

    cxtObj.stroke();

    </script>

</body>

</html>

九、Canvas简单操作(画多边形)

三角形代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>画一个矩形</title>

</head>

<body>

    <canvas width="800" height="400" id="canvas" style="background: red;">对不起</canvas>

    <script type="text/javascript">

    //1.创建canvas节点对象

    var canvasObj = document.getElementById(‘canvas‘);

    //2.创建绘画环境对象

    var cxtObj = canvasObj.getContext(‘2d‘);

 

    //定义起始点

    cxtObj.moveTo(150, 100);

    cxtObj.lineTo(50, 180);

    cxtObj.lineTo(200, 180);

    cxtObj.stroke();

    cxtObj.fill();

    </script>

</body>

</html>

四角形代码

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>画一个矩形</title>

</head>

<body>

    <canvas width="800" height="400" id="canvas" style="background: red;">对不起</canvas>

    <script type="text/javascript">

    //1.创建canvas节点对象

    var canvasObj = document.getElementById(‘canvas‘);

    //2.创建绘画环境对象

    var cxtObj = canvasObj.getContext(‘2d‘);

 

    //定义起始点

    cxtObj.moveTo(150, 100);

    cxtObj.lineTo(300, 100);

    cxtObj.lineTo(200, 180);

    cxtObj.lineTo(50, 180);

    cxtObj.stroke();

    cxtObj.fill();

    </script>

</body>

</html>

以上是关于Canvas的主要内容,如果未能解决你的问题,请参考以下文章

如何用android 画出三角形

如何用android 画出三角形

超简洁代码实现CircleImageView

实验三

小程序使用Canvas画饼图

Canvas