canvas

canvas

属性

width、height只能在标签中设置，在css样式中设置画布会变形

兼容性

标签中的文字只在低版本浏览器上显示（IE6/7/8），在高版本浏览器看不到文字

获取画布元素

//获取canvas
var canvas = document.getElementById('CANVAS').getContext('2d');

绘制矩形

//设置颜色
canvas.fillStyle = 'pink'
//设置矩形的方法
canvas.fillRect(0,0,300,300)

绘制三角形

//开始的位置
canvas.moveTo(50,50)
//线的位置
canvas.lineTo(200,50)
canvas.lineTo(50,200)
//结束连接
canvas.closePath()
//绘制边的颜色
canvas.strokeStyle = 'red'
//绘制空心三角
canvas.stroke()
//绘制实心边颜色
canvas.fillStyle = 'pink'
//绘制实心三角
canvas.fill()

绘制圆形

//开始绘制
canvas.beginPath()
//arc有六个参数,分别是X（圆的中心的X坐标）,Y（圆的中心的Y坐标）,R(半径),起始角的弧度，终止角的弧度,可选,规定应该逆时针还是顺时针绘图。False = 顺时针(默认)，true = 逆时针
//弧度和角的js表达式 弧度 = （Math.PI/180）*角度
canvas.arc(250,250,250,0,Math.PI*2)
//结束绘制
canvas.closePath()
//实心圆
canvas.fill()
//空心圆
canvas.stroke()

绘制端点

canvas.beginPath()
canvas.moveTo(50,50)
canvas.lineTo(100,100)
//绘制端点两头形状
canvas.lineCap = 'round/square'
//设置线条的宽度
canvas.lineWidth = 5

线条相交的形状

//相交是圆
canvas.lineJoin = 'round'
//平的
canvas.lineJoin = 'bevel'
//默认
canvas.lineJoin = 'miter'

绘制弧线

//从起点开始绘制弧线，到(x2,y2)结束，radius：弧度
canvas.lineWidth = 5;
canvas.beginPath();
canvas.moveTo(50,50);
canvas.arcTo(100,50,100,100,50);
canvas.stroke();

二次贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y)
//绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

使用二次贝塞尔曲线绘制对话气泡

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    // 二次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(75, 25);
    ctx.quadraticCurveTo(25, 25, 25, 62.5);
    ctx.quadraticCurveTo(25, 100, 50, 100);
    ctx.quadraticCurveTo(50, 120, 30, 125);
    ctx.quadraticCurveTo(60, 120, 65, 100);
    ctx.quadraticCurveTo(125, 100, 125, 62.5);
    ctx.quadraticCurveTo(125, 25, 75, 25);
    ctx.stroke();
   }
}

三次贝塞尔曲线

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

使用三次贝塞尔曲线绘制心形

线性渐变

//起始坐标终止坐标
var gradient = canvas.createLinearGradient(0,0,500,500)
//颜色停止点
gradient.addColorStop(0,'red')
gradient.addColorStop(.5,'green')
gradient.addColorStop(1,'yellow')
canvas.fillStyle = gradient

镜像渐变

//开始的x，y轴和圆的半径到结束的x，y轴和圆的半径
var gradient = canvas.createRadialGradient(250,250,10,250,250,250);
gradient.addColorStop(0,'red')
gradient.addColorStop(.5,'green')
gradient.addColorStop(1,'yellow')
canvas.fillStyle = gradient

绘制文本

//要写的文字，x轴和y轴，最大像素宽度（可选）
canvas.fillText('慕',100,100,100)
//搭配
canvas.font = "normal 50px Yahei";
canvas.textAlign = "start";
canvas.strokeStyle = "red"

绘制阴影

//shadowColor:表示颜色
canvas.shadowColor = "red";
//shadowOffsetX:表示x方向的偏移量
canvas.shadowOffsetX = 5;
//shadowOffsetY:表示y方向的偏移量
canvas.shadowOffsetY = 5;
//shadowBlur:表示模糊度
canvas.shadowBlur = 5;

绘制图像

//图片，x，y轴，宽和高
var img = new Image();
img.src = "./2.jpg";
img.onload = function(){
	canvas.drawImage(img,0,0,200,200);
}

案例：实现黑客帝国风格

<script>
        var w = document.documentElement.clientWidth;
        var h = document.documentElement.clientHeight;
        var canvas = document.getElementById('canvas');
        canvas.width = w;
        canvas.height = h;
        var ctx = canvas.getContext('2d');
        var fontSize = 40
        var clos = Math.floor(w / fontSize)
        var num = []
        for (var i = 0; i < clos; i++) {
            num.unshift(0)
        }
        function draw() {
            ctx.fillStyle = 'rgba(0,0,0,0.05)'
            ctx.fillRect(0,0,w,h)
            var str = '慕';
            ctx.font = '600 ' + fontSize + 'px 微软雅黑'
            ctx.fillStyle = '#0AE642'
            for (let i = 0; i < clos; i++) {
                let y = num[i] * fontSize;
                let x = i * fontSize;
                ctx.fillText(str, x, y);
                num[i]++;
                if(y > h && Math.random() > 0.99){
                    num[i] = 0
                }
            }
        }
        setInterval(draw,30)
    </script>

完整canvas教程