一、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. 超详细Redis数据库入门教程

    [本教程目录] 1.redis是什么2.redis的作者何许人也3.谁在使用redis4.学会安装redis5.学会启动redis6.使用redis客户端7.redis数据结构 – 简介8.redis ...

  2. JavaWeb学习总结(三)——Tomcat服务器学习和使用

    收藏 JavaWeb学习总结(三)——Tomcat服务器学习和使用 http://www.cnblogs.com/xdp-gacl/p/3744053.html

  3. 【Jmeter自学】jmeter实战-其他请求和总结（七）

    FTP测试 步骤:其他的结果树等跟http请求一样  mysql数据库测试 JDBC请求 Jmeter-分布式性能测试 jmeter结果分析:

  4. fabric-ca1.03安装

    前面的文档已经成功的安装了fabric1.0.1的e2e例子.之后代码换成1.0.3版本按步骤重新安装一下,就可以切换到1.0.3了.1.0.3的脚本和启动命令没有变化,还是用的1.0.1的. 1.准 ...

  5. scp（secure copy）安全拷贝

    scp(secure copy)安全拷贝 (1)scp定义: scp可以实现服务器与服务器之间的数据拷贝.(from server1 to server2) (2)基本语法 命令  递归  要拷贝的文 ...

  6. nginx面试中最常见的18道题

    1.请解释一下什么是Nginx? Nginx是一个web服务器和反向代理服务器,用于HTTP.HTTPS.SMTP.POP3和IMAP协议. 2.请列举Nginx的一些特性. Nginx服务器的特性包 ...

  7. hadoop/hdfs/yarn 详细命令搬运

    转载自文章 http://www.cnblogs.com/davidwang456/p/5074108.html 安装完hadoop后,在hadoop的bin目录下有一系列命令: container- ...

  8. rem布局js实现

    (function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement ...

  9. #Weex与Android交互（一）

    用Weex开发Android程序 参考:开发HelloWorld程序(Weex开发) 1.创建Android工程 2.集成WeexSDK,参考[WEEX SDK 集成到 Android 工程](htt ...

  10. 转载：return *this和return this

    文章出处,感谢分享http://blog.csdn.net/stpeace/article/details/22220777 别跟我说, return *this返回当前对象, return this ...