canvas这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

html的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8>
<title>Document</title>
<style>
#myCanvas{ background: #CCC; }
* { margin:0; padding: 0;}
html,body{ width: 100%; height: 100%;}
canvas{ display: block;}
</style>
</head>
<body>
<canvas id="myCanvas" width="800" height="800" ></canvas>
</body>
</html>

------------------------------分隔线------------------------------------------

第一部分:基本概念等

1. 创建canvas画布
<canvas id="myCanvas" width="800" height="800" ></canvas>
注意:① width、height,这两个属性定义了canvas元素宽和高,从而相应的定义了2D渲染上下文的尺寸。
   ② 2D渲染上下文的尺寸默认值:宽300像素、高150像素
2. 坐标
左上角为原点(0,0)
右移:x坐标增加
下移:y坐标增加
3. 2D渲染上下文(真正绘制图形的地方)

<script type="text/javascript">
    var canvas = document.getElementById('myCanvas');	// 获取canvas的ID
    var context =canvas.getContext("2d");
</script>

第二部分:矩形
1.绘制矩形
方法:context.fillRect(x,y,width,height);
2.绘制描边矩形
方法:strokeRect(x,y,width,height)
实例:

<script>
    function draw1(id){
        var canvas = document.getElementById(id);
        var context =canvas.getContext("2d");
        context.fillRect(0,0,100,100);	// 绘制一个矩形,默认颜色为黑色
        context.strokeRect(120, 0, 100, 100);     // 绘制描边矩形
    }draw1('myCanvas');
</script>

第三部分:线条
线条(路径)绘制步骤:
1)beginPath()      准备
2)moveTo()      绘制路径的原点坐标(x,y)
3) lineTo()         设置线条的终点坐标(x,y)
4) closePath()      完成路径的绘制
5)stroke()       绘制轮廓,显示路径
实例:

<script>
    function draw1(id){
        var canvas = document.getElementById(id);
        var context =canvas.getContext("2d");
        context.beginPath();
        context.moveTo(40,40);
        context.lineTo(140,40);
        context.closePath();
        context.stroke();
    }draw1('myCanvas');
</script>  

第四部分:圆形
canvas 通过绘制圆弧并将其首尾相连,达到绘制圆形的目的。
创建圆弧的方法:context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
对应参数:
1)圆弧原点的(x,y)坐标值,也就是例子中的圆心
2)圆弧半径
3)开始角度
4)结束角度
5)布尔值(顺时针false,逆时针true)
注意: canvas中的圆是以弧度而不是角度为单位的。
360度(一个完整的圆)是2π(PI的2倍)弧度
实例:

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id);
        var context =canvas.getContext("2d");
        context.beginPath();
        context.arc(230,90,50,0,Math.PI*2,false); // 绘制圆形
        context.closePath();
        context.fill(); // 填充路径
    }draw1('myCanvas');
</script>

第五部分:样式
1. fillStyle :给矩形填充颜色
2. strokeStyle:给描边和线条添加颜色
3. lineWidth:修改线宽(线宽默认为1),这个属性也会影响图形

通过设置2D渲染上下文的fillStyle属性,就能够修改形状和路径的填充颜色,如下,绘制一个红色的正方形

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id);
        var context =canvas.getContext("2d");
        context.fillStyle = "red";    // 给图形填充红色
        context.fillRect(0,0,50,50);     // 一个红色的正方形
        context.fillRect(70,70,80,80);    // 又一个红色正方形

        context.fillStyle = "blue";      // 给图形填充蓝色
        context.fillRect(70,70,80,80);     // 一个蓝色正方形

        context.strokeStyle = "yellow";      // 给图形填充黄色描边
        context.strokeRect(170,170,100,100);    // 一个黄色描边的正方形

        context.strokeStyle = "blue";   // 绘制蓝色线条
        context.beginPath();     // 绘制线条开始
        context.moveTo(290,290);
        context.lineTo(350,350);
        context.closePath();
        context.stroke();    // 绘制线条结束

        context.lineWidth = 5;	 // 加粗线条
        context.strokeStyle = "blue";     // 绘制蓝色线条
        context.beginPath();
        context.moveTo(320,340);
        context.lineTo(370,390);
        context.closePath();
        context.stroke();     // 加粗的线条绘制完成
        context.strokeRect(380,380,50,50)     // 受影响的图形,描边已加粗
    }draw1('myCanvas');
</script>

 

第六部分:绘制文本
canvas绘制文本:
① canvas中的文本以图片形式绘制,不可用普通文字一样用鼠标指针选取
② 文字绘制后不可编辑,除非先擦除文字,重新绘制
注:通常是使用html来处理文本,使用canvas来处理像素和图形
1.绘制文本:fillText
参数:
准备绘制的文本,文本原点(左下角)的(x,y)坐标值
默认:10px sans-serif
2.修改文字属性:font
3.描边文本:strokeText

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id);
        var context =canvas.getContext("2d");
        var text = "hello world!";
        context.font="30px serif" // 把文本大小设置为30px
        context.fillText(text,40,40); // 绘制文本
        context.strokeText(text,40,80); // 描边文笔塔你
    }draw1('myCanvas');
</script>

第七部分:擦除canvas
① clearRect();
参数:原点坐标,宽,高

<script type="text/javascript">
    function draw1(id){
        var canvas = document.getElementById(id);
        var context =canvas.getContext("2d");

        context.beginPath();     // 绘圆开始
        context.arc(230,90,50,0,Math.PI*2,false);
        context.closePath();
        context.fill();     // 绘圆结束

        context.fillStyle= "blue";
        context.fillRect(180,140,100,100);     // 正方形绘图完成

        context.clearRect(180,140,100,100);     // 从原点(180,140)位置开始擦除,擦除掉100 X 100的区域(清除了上面的正方形)

        context.clearRect(230,90,50,50);     // 弧形的原点是它的中心,为了获得clearRect方法所需的正确原点,需要用原点的x,y坐标减去它的半径(清除掉了圆的部分区域)
    }draw1('myCanvas');
</script>

  

第八部分:
使canvas填满浏览器窗口
canvas会忽略百分比,将100%解释为100px,所以要使canvas填满窗口,只需将canvas元素的高度和宽度精确设置为浏览器窗口的高度和宽度即可(为了避免随意调整窗口大小会出现滚动条的问题,要配合onresize方法使用)

<script type="text/javascript">
    window.onresize = resizeCanvas;
    function resizeCanvas(){
        var canvas = document.getElementById('myCanvas');
        var context =canvas.getContext("2d");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        context.fillStyle="red";
        context.fillRect(50,50,150,150);
    };
    resizeCanvas();
</script>

随意调整窗口大小,都不会出现滚动条。

-----------------------------------------------------------------------

以上是学习的时候做的笔记,如果有问题,欢迎指正,不甚感激 ~

参考资料   《 HTML5 Canvas 基础教程 》

canvas 基础知识整理(一)的更多相关文章

  1. canvas 基础知识整理(二)

    html部分: <canvas id="myCanvas" width="800" height="800" ></can ...

  2. Kali Linux渗透基础知识整理(四):维持访问

    Kali Linux渗透基础知识整理系列文章回顾 维持访问 在获得了目标系统的访问权之后,攻击者需要进一步维持这一访问权限.使用木马程序.后门程序和rootkit来达到这一目的.维持访问是一种艺术形式 ...

  3. Kali Linux渗透基础知识整理(二)漏洞扫描

    Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...

  4. 【OGG】OGG基础知识整理

    [OGG]OGG基础知识整理 一.GoldenGate介绍 GoldenGate软件是一种基于日志的结构化数据复制软件.GoldenGate 能够实现大量交易数据的实时捕捉.变换和投递,实现源数据库与 ...

  5. java部分基础知识整理----百度脑图版

    近期发现,通过百度脑图可以很好的归纳总结和整理知识点,本着学习和复习的目的,梳理了一下java部分的知识点,不定期更新,若有不恰之处,请指正,谢谢! 脑图链接如下:java部分基础知识整理----百度 ...

  6. canvas基础知识

    canvas基础知识 ## CanvasDOM对象 #### 获取绘图环境```canvas.getContext();``` #### 设置宽和高```canvas.width = 500;canv ...

  7. wifi基础知识整理

    转自 :http://blog.chinaunix.net/uid-9525959-id-3326047.html WIFI基本知识整理 这里对wifi的802.11协议中比较常见的知识做一个基本的总 ...

  8. JavaScript基础知识整理

    只整理基础知识中关键技术,旨在系统性的学习和备忘. 1.在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,而 undefined 的操作象特殊值NaN ...

  9. canvas API ,通俗的canvas基础知识(四)

    今天要讲的内容是canvas的转换功能,前面的内容没用看的同学可以出门右转,先看看前面的基础知识,废话不多说,开始进入正题吧! 何为转换功能?熟悉css3的同学都知道,css3里面有transform ...

随机推荐

  1. opencv学习笔记(六)直方图比较图片相似度

    opencv学习笔记(六)直方图比较图片相似度 opencv提供了API来比较图片的相似程度,使我们很简单的就能对2个图片进行比较,这就是直方图的比较,直方图英文是histogram, 原理就是就是将 ...

  2. NeHe OpenGL教程 第二十四课:扩展

    转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...

  3. hdu 1576 A/B (扩展欧几里德简单运用)

    http://acm.hdu.edu.cn/showproblem.php?pid=1576 A/B Time Limit: 1000/1000 MS (Java/Others) Memory Lim ...

  4. python小白——进阶之路——day3天-———运算符

    (1)算数运算符:  + - * / // % ** (2)比较运算符:  > < >= <= == != (3)赋值运算符:  = += -= *= /= //= %= ** ...

  5. Scrapy中集成selenium

    面对众多动态网站比如说淘宝等,一般情况下用selenium最好 那么如何集成selenium到scrapy中呢? 因为每一次request的请求都要经过中间件,所以写在中间件中最为合适 from se ...

  6. centos7下kubernetes(6。运行应用)

    Deployment 从一个例子开始 kubectl run nginx-deployment --image=nginx:1.7.9 --replicas=2 kubectl get deploym ...

  7. java.io.IOException No space left on device

    磁盘空间不足 1.df -k,发现程序所在的工作目录/data,居然到了100%. 1604050 free allocated Kb 535144219 used allocated Kb 100 ...

  8. QueryPerformanceFrequency

    var c1: int64; t1, t2: int64; QueryPerformanceFrequency(c1); QueryPerformanceCounter(t1); // GetSell ...

  9. Microsoft - Find Biggest Node

    public Node findBiggest (Node n1, Node n2){ Node c1 = n1; Node c2 = n2; boolean isPositive = false; ...

  10. [华为]查找两个字符串a,b中的最长公共子

    链接:https://www.nowcoder.com/questionTerminal/181a1a71c7574266ad07f9739f791506来源:牛客网 查找两个字符串a,b中的最长公共 ...