一、Canvas 应用场景

1.游戏

2.图表

3.动画

4.codepen.io （HTML5 动效） 最早

二、Canvas 发展历史

1.最早在apple的safari  1.3中引入

2.ie9之前的浏览器不支持Canvas

3.http://caniuse.com/

三、如何使用Canvas

1.添加canvas标签

<canvas width=500 height=500></canvas>

2.获得canvas元素

var canvas = document.getElementById('myCanvas');

3. 获得canvas上下文对象

var ctx = canvas.getContext('2d')

两个对象

1. 元素对象（canvas元素）和上下文对象（通过getContext('2d')⽅方法获取到的CanvasRenderingContext2D对象）

2. 元素对象相当于我们的画布，上下文对象相当于画笔， 我们接下来的所有操作是基于上下文对象的

绘制线段

1.ctx.moveTo(x, y); 移动到 x，y坐标点

2.ctx.lineTo(x, y); 从当前点绘制直线到x，y点

3.ctx.stroke();描边

4.ctx.lineWidth = 20; 设置线段宽度

5.ctx.closePath(); 闭合当前路径 和回到起始点的区别

6.ctx.fill(); 填充

路径与填充

1.fill和stroke方法都是作用在当前的所有子路径

2.完成一条路径后要重新开始另一条路径时必须使用beginPath()方法, betinPath开始子路径的一个新的集合

<body>

     <canvas id="cans" width=300 height=300></canvas>

     <script>

        var oCanvas = document.getElementById('cans');

        var ctx = oCanvas.getContext('2d');

        ctx.lineWidth = 20;

        ctx.moveTo(100,50);

        ctx.lineTo(100,100);

        ctx.lineTo(50,100);

        ctx.strokeStyle = 'red';

        ctx.closePath();

        ctx.stroke();

        ctx.beginPath();

        ctx.moveTo(200,200);

        ctx.lineTo(200,400);

        ctx.strokeStyle = '#000';

        ctx.stroke();

     </script>

</body>

绘制矩形

1.ctx.rect(x, y, dx, dy);     （x,y原点  宽、高）

2.ctx.fillRect(x, y, dx, dy);

3.ctx.strokeRect(x, y, w, h);

擦除当前区域

1.ctx.clearRect(x, y, dx, dy);

        ctx.strokeRect(100,100,100,100);

        ctx.clearRect(0,0,300,300);

2.实现矩形落地动画

   <style>

       canvas{

            width:300px;

            height:300px;

            border:1px solid #000;

       }

    </style>

</head>

<body>

     <canvas id="cans" width=300 height=300></canvas>

     <script>

        var oCanvas = document.getElementById('cans');

        var ctx = oCanvas.getContext('2d');

        ctx.fillRect(100,100,50,50);

        var y = 100;

        var timer = setInterval(function(){

            ctx.clearRect(0,0,300,300)

            ctx.fillRect(100,y,50,50);

            y += 10;

            if(y>250){

              clearInterval(timer);

            }

        },100)

     </script>

</body>

绘制弧形

1.arc(x, y, r, 起始弧度, 结束弧度,弧形的方向 )

2.角以弧度计，0顺时针 1逆时针

2*Math.PI  =360deg    Math.PI / 4         3*Math.PI /  4

绘制圆角

1.ctx.arcTo(x1, y1, x2, y2, r)

2. 绘制的弧线与当前点和x1,y1连线，x1,y1和x2,y2连线都相切

        ctx.moveTo(100,110); //弧度问题加10像素

        ctx.arcTo(100,200,200,200,10);

        ctx.arcTo(200,200,200,100,10);

        ctx.arcTo(200,100,100,100,10);

        ctx.arcTo(100,100,100,200,10);

        ctx.stroke();

贝塞尔曲线

1.quadraticCurveTo(x1, y1,ex,ey ) 二次贝塞尔曲线

x1,y1 控制点

ex,ey 结束点

2. bezierCurveTo(x1, y1, x2, y2, ex, ey) 三次贝塞尔曲线

x1,y1，x2,y2 控制点

ex,ey 结束点

<body>

     <canvas id="cans" width=500 height=300></canvas>

     <script>

        var oCanvas = document.getElementById('cans');

        var ctx = oCanvas.getContext('2d');

        ctx.moveTo(100,100);

        ctx.quadraticCurveTo(200, 300,400,200);

        ctx.stroke();

     </script>

</body>

坐标轴转换

1.translate(dx, dy) 重新映射画布上的 (0,0) 位置

2.scale(sx, sy) 缩放当前绘图

3.rotate(Math.PI) 旋转当前的绘图

4.save() restore() 保存当前图像状态的一份拷贝 从栈中弹出存储的图形状态并恢复

5. setTransform(a, b, c, d, e, f) 先重置再变换

参数：水平缩放、水平倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动

6. transform(a, b, c, d, e, f) 在之前的基础上变换

     <canvas id="cans" width=500 height=500></canvas>

     <script>

        var oCanvas = document.getElementById('cans');

        var ctx = oCanvas.getContext('2d');

        ctx.translate(100,100);

        ctx.fillRect(0,0,100,100);

     </script>

save() restore()

<body>

     <canvas id="cans" width=500 height=500></canvas>

     <script>

        var oCanvas = document.getElementById('cans');

        var ctx = oCanvas.getContext('2d');

        ctx.save();//[tranlate(0,0)]

        //保存这个时候坐标轴状态  [] 放在栈中

        ctx.translate(100,100);

        ctx.save();//[tranlate(0,0),tranlate(100,100)]

        //保存平移时坐标轴的状态

        ctx.rotate(Math.PI/4);

        ctx.fillRect(0,0,100,100);

        ctx.restore();

        //按离restore的save标准

        ctx.fillStyle ='red';

        ctx.fillRect(0,0,50,50);

        ctx.restore();

        ctx.fillStyle ='green';

        ctx.fillRect(0,0,50,50);

     </script>

</body>

setTransform(a, b, c, d, e, f)

        ctx.translate(100,100);

        ctx.setTransform(1, 1, 1, 0.5, 100, 100);//跟上一次变换无关(translate)

        ctx.fillRect(0,0,100,100);

transform(a, b, c, d, e, f)

        ctx.translate(100,100);

        ctx.transform(1, 1, 1, 0.5, 100, 100);//跟上一次变换有关(translate)

        ctx.fillRect(0,0,100,100);

填充图案

1.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat")

2.img元素（Image对象），canvas元素，video元素(有图形的)

        var img = new Image();

        img.src="C:/Users/Administrator/Desktop/1.jpg"

        img.onload = function(){

           var bg = ctx.createPattern(img,'no-repeat');

           ctx.fillStyle = bg;

           ctx.fillRect(0,0,500,500);

        }
     <canvas id="cans" width=500 height=500></canvas>

     <canvas id="cans2" width=100 height=100></canvas>

     <script>

        var oCanvas = document.getElementById('cans');

        var ctx = oCanvas.getContext('2d');

        var oCanvas2 = document.getElementById('cans2');

        var ctx2 = oCanvas.getContext('2d');

        ctx2.fillRect(0,0,100,100)

        var img = new Image();

        img.src="C:/Users/Administrator/Desktop/1.jpg"

        img.onload = function(){

           var bg = ctx.createPattern(oCanvas2,'no-repeat');

           ctx.fillStyle = bg;

           ctx.fillRect(0,0,500,500);

        }

     </script>

渐变

1.createLinearGradient(x1, y1, x2, y2); 线性渐变 必须在填充渐变的区域里定义渐变, 否则 没有效果

2.createRadialGradient(x1, y1, r1, x2, y2, r2); 径向渐变

3.bg.addColorStop(p, color);

     <canvas id="cans" width=500 height=500></canvas>

     <script>

        var oCanvas = document.getElementById('cans');

        var ctx = oCanvas.getContext('2d');

        var bg = ctx.createLinearGradient(0, 0, 500, 500);

        bg.addColorStop(0,'red');

        bg.addColorStop(0.5,'green');

        bg.addColorStop(1,'yellow');

        ctx.fillStyle = bg;

        ctx.fillRect(0,0,500,500);

     </script>

     //线性渐变
    <canvas id="cans" width=500 height=500></canvas>

     <script>

        var oCanvas = document.getElementById('cans');

        var ctx = oCanvas.getContext('2d');

        var bg = ctx.createRadialGradient(200, 200, 100, 200,200,200);

        bg.addColorStop(0,'#fff');

        bg.addColorStop(0.5,'#000');

        bg.addColorStop(1,'#fff');

        ctx.fillStyle = bg;

        ctx.fillRect(0,0,500,500);

     </script>

阴影

ctx.shadowColor

ctx.shadowOffsetX

ctx.shadowOffsetY

ctx.shadowBlur

注：这里的阴影偏移量不受坐标系变换的影响

文本

1. fillText()

2. strokeText()

3. measureText('hello world') 了解

线段样式

1.lineCap

2.lineJoin

tx.miterLimit; 当lineJoin是miter时，用于控制斜接部分的长度

如果斜接长度超过 miterLimit 的值，变成bevel

注:实际运算是大于limit*lineWidth/2的值，了解就好

斜接长度

Canvas 绘画的更多相关文章

  1. 浅谈canvas绘画王者荣耀--雷达图

    背景: 一日晚上下班的我静静的靠在角落上听着歌,这时"滴!滴!"手机上传来一阵qq消息.原来我人在问王者荣耀的雷达图在页面上如何做出来的,有人回答用canvas绘画.那么问题来了, ...

  2. 开发Canvas 绘画应用（四）：实现拖拽绘画

    在开发Canvas绘画应用(三):实现对照绘画中,我们实现了视图引导的第一部分,这一篇我们来完成第二部分,即将图片直接拖到画布上进行绘画. ✁ 拖放如何实现? [拖放的基本概念]:创建一个绝对定位的元 ...

  3. 开发Canvas 绘画应用（三）：实现对照绘画

    需求分析 在我的毕设中,提出了视图引导的概念,由两部分功能组成: (1)可以对照着图片进行绘画,即将图片以半透明的方式呈现在绘图板上,然后用户可以对照着进行绘画: (2)可以直接将简笔画图片直接拖拽到 ...

  4. 开发Canvas 绘画应用（二）：实现绘画

    开发Canvas 绘画应用(一):搭好框架 中我们已经把基本框架及基础功能实现了,现在要实现本应用的重点:绘画功能. 首先分析一下,我们要实现绘画,需要具备的理论知识如下: (1)获取触摸点的坐标 类 ...

  5. 开发Canvas 绘画应用（一）：搭好框架

    毕业汪今年要毕业啦,毕设做的是三维模型草图检索,年前将算法移植到移动端做了一个小应用(利用nodejs搭的服务),正好也趁此机会可以将前端的 Canvas 好好学一下~~毕设差不多做完了,现将思路和代 ...

  6. html5 canvas绘画时钟

    本示例使用HTML5 canvas,模拟显示了一个时钟, 请使用支持HTML5的浏览器预览效果: HTML部分: <!DOCTYPE html> <html lang="e ...

  7. Canvas绘画功能（待补充）

    由于项目的前端需要用户手绘输入,所以我们利用Canvas控件做绘画面板,并且实现了许多功能,包括手绘笔画,清空画板,上传手绘图,下载手绘图,记录用户笔画,上传背景图.以后有时间都写到这篇博客中,今天晚 ...

  8. canvas 绘画随机点

    直接看图吧: 这样的随机点,是小圆点组成的,然后一直在动,记录一下,万一以后要用到呢: canvas的具体设置我就不写了,另一篇文档里有: drawRandomDot () { let leftCan ...

  9. canvas绘画交叉波浪

    做个记录,自己写的动态效果,可能以后用的着呢: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

随机推荐

  1. JVM总结-垃圾回收

    Java 虚拟机的自动内存管理,将原本需要由开发人员手动回收的内存,交给垃圾回收器来自动回收.不过既然是自动机制,肯定没法做到像手动回收那般精准高效 [1] ,而且还会带来不少与垃圾回收实现相关的问题 ...

  2. suricata 关键字补充说明

    基本关键字 1.msg(对匹配到的规则的说明,第一部分约定用大写字母表示,msg始终是签名的第一个关键字) 注意:msg中必须转义以下字符: ; \ " msg :“ATTACK-RESPO ...

  3. Java 多线程 （Thread 类）

    1.多线程 2.卖票 1.多线程实现 两种方式可以实现多线程: 继承 Thread 类,重写 run 方法:定义对象,调用 start 方法 创建类实现 Runnable 接口,作为实参传递给 thr ...

  4. 什么是事务、事务特性、事务隔离级别、spring事务传播特性

    1.什么是事务: 事务是程序中一系列严密的操作,所有操作执行必须成功完成,否则在每个操作所做的更改将会被撤销,这也是事务的原子性(要么成功,要么失败). 2.事务特性: 事务特性分为四个:原子性(At ...

  5. python－单元测试unittest

    目录: 1.unittest.TestCase中常用的断言方法 1.1 subTest子测试 1.2 套件测试 1.3 批量测试单个用例 2. 加载器 2.1加载器协议 2.2.执行器 TestRun ...

  6. 8.Appium的基本使用-2（安装node.js）

    node.js 下载地址:https://nodejs.org/en/download/下载 64-bit 下载包下载完成双击安装:

  7. 21.xpath定位中id 、starts-with、contains、text()和last() 的用法

    xpath语法:id .starts-with.contains.text()和last() 的用法 <input id="su" class="bg s_btn ...

  8. vue下载和上传excle数据文件，解析excel文件数据并存在数据库中

    下载: VUE: window.open("xxxx/downloadOldTaskDataFile.do_", "_blank"); JAVA: /** * ...

  9. Python_02 基本数据类型、while循环

    1.基本数据类型 1.字符串(引号内): name=“我是Manuel” name='我是Manuel' name="""Manuel""" ...

  10. 企业应用--Nginx&web部署

    一.Nginx介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务. Nginx是由伊戈尔·赛索耶夫为俄罗斯访问量第二的Rambler ...