一、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. java正则表达式替换空格和换行符

    public class StringUtil {        public static String getStringNoBlank(String str) {            if(s ...

  2. day6作业（元组，字典，集合）

    默写: 1.元组 字典 集合 列表 各自的特点 2.字典添加 删除 修改 循环 必做: 1.餐厅提供了五种不同的菜,使用元组来存储他们,并循环打印出所有菜名,要求用户输入新加的菜名,加入到菜单中,并重 ...

  3. JVM总结-反射

    反射是 Java 语言中一个相当重要的特性,它允许正在运行的 Java 程序观测,甚至是修改程序的动态行为. 举例来说,我们可以通过 Class 对象枚举该类中的所有方法,我们还可以通过 Method ...

  4. 500 Internal Privoxy Error

    打开网站突然发现网站无法打开了,一脸懵逼,服务器重启也不行,明明能ping通,网上查的答案千奇百怪的 500 Internal Privoxy Error Privoxy encountered an ...

  5. Java可视操作界面例子

    package rom; import java.lang.*; import java.awt.*; import java.awt.event.ActionEvent; import java.a ...

  6. ace admin

    .svg             image/svg+xml.woff            application/x-font-woff.woff2          application/x- ...

  7. iOS如何把所有页面状态栏的字体颜色都设置为白色

    第一步:在info.plist中添加一个字段:view controller -base status bar 设置为NO 第二步:在一个所有界面都继承的父类里添加: if (IOS7_OR_LATE ...

  8. uva-10132-排序

    题意: 有很多文件,碎成了俩片,问,原来的文件是什么,如果有多个答案,任意一个答案就行,输入2N个字符串,拼接成N个文件. 直接排序,正确的答案一定是某个长度最短的和某个最长的连在一起. #inclu ...

  9. 错误代码： 1231 - Variable 'sql_mode' can't be set to the value of 'NULL'

    错误代码: 1231 - Variable 'sql_mode' can't be set to the value of 'NULL' 错误代码: - Variable 'sql_mode' can ...

  10. 《算法》第三章部分程序 part 5

    ▶ 书中第三章部分程序,加上自己补充的代码,包含公共符号表.集合类型 ● 公共符号表,用于普通查找表的基本类 package package01; import java.util.NoSuchEle ...