html5 之 Canvas

canvas 基本概念

1.canvas只是一个容器（画布），我们可以规定他的大小

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
    当浏览器不支持canvas, 这里才会显示。
</canvas>

2.canvas必须使用脚本来绘画

// 首先，找到canvas
var c = document.getElementById('myCanvas')
// 然后，创建 context 对象(getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法)
var ctx = c.getContext("2d")

3.浏览器支持

// 通过js来判断
var c = document.getElementById('myCanvas')
if(c.getContext('2d')) {
    var ctx = c.getContext('2d')
} else {
    alert('请您升级浏览器')
}

画矩形

// 设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
ctx.fillStyle="#FF0000";
// fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
ctx.fillRect(0,0,150,75);

直线

// 直线开始坐标
ctx.moveTo(0,0);
// 结束坐标
ctx.lineTo(200,100);
// 使用 stroke() 方法来绘制线条
ctx.stroke();

画圆

// 开始
ctx.beginPath();
// 起始x,y坐标  半径  开始角度和结束角度（弧度）
ctx.arc(95,50,40,0,2*Math.PI);
// 使用 stroke() 方法来绘制
ctx.stroke();

文本

// font 定义字体
ctx.font="30px Arial";
// 文本 和 位置（x, y）maxWidth(最大宽度，非必选)
ctx.fillText("Hello World",10,50);

图片

var img=new Image()
img.src="http://www.w3school.com.cn/i/ct_html5_canvas_image.gif"
ctx.drawImage(img,0,0);

渐变色

var grd = cxt.createLinearGradient(0, 0, 175, 50);
grd.addColorStop(0, "#FF0000");
grd.addColorStop(1, "#00FF00");
cxt.fillStyle = grd;
cxt.fillRect(0, 0, 175, 50);

`CANVAS`时钟

首先要明白几个基本概念

// 几何概念
sin a = 对边/斜边
cos a = 临边/斜边

// js的sin(a)
// 这里的a是弧度 不是几何里面的角度 需要换算成弧度
圆周长         =  2πr
1度所对应的弧长 =  2πr/360
1弧度          =  2π/360
Math.sin(a)

时钟代码
图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                text-align: center;
                margin-top:100px ;
            }
            #clock{
                border: 1px solid #ccc;
            }
        </style>
    </head>
    
    <body>
        <div>
            <!-- http://www.w3school.com.cn/tags/html_ref_canvas.asp -->
            <canvas id="clock" width="200" height="200"></canvas>
        </div>
    </body>
    <script type="text/javascript">
        var dom     = document.getElementById('clock');
        var ctx     = dom.getContext('2d');
        var width   = ctx.canvas.width;
        var height  = ctx.canvas.height;
        var r       = width/2
        
        // 定义背景圆
        function drawBackground() {
            // 保存当前的状态  不然下面定义的圆心 会在最后错位
            ctx.save()
            // 重新定义圆心
            ctx.translate(r, r);
            // 开始路径
            ctx.beginPath()
            
            // 画最外面的粗圆
            ctx.lineWidth = 10
            ctx.arc(0, 0, r-ctx.lineWidth/2, 0, 2*Math.PI, false)
            ctx.stroke()
            
            // 小时数  0度开始
            ctx.font="18px Arial";
            ctx.textAlign = 'center';
            ctx.textBaseline="middle";
            var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];
            hourNumbers.forEach(function(num, i) {
                var rad = 2*Math.PI/12 * i;
                var x = Math.cos(rad)*(r - 30);
                var y = Math.sin(rad)*(r - 30);
                
                ctx.fillText(num, x, y)
            })
            
            // 画60个远点
            for(var i=0; i<60; i++) {
                var rad = 2*Math.PI/60 * i;
                var x = Math.cos(rad)*(r-18);
                var y = Math.sin(rad)*(r-18);
                ctx.beginPath();
                if(i%5 === 0) {
                    ctx.fillStyle = '#000'
                    ctx.arc(x, y, 2, 0, 2*Math.PI, false);
                } else {
                    ctx.fillStyle = '#ccc';
                    ctx.arc(x, y, 2, 0, 2*Math.PI, false);
                }        
                ctx.fill()
            }
        }
        
        // 画时针
        function drawHour(hour, minute) {
            ctx.save();
            ctx.beginPath();
            var rad = 2*Math.PI/12 * (hour + minute/60)
            ctx.rotate(rad);
            ctx.lineWidth = 6;
            ctx.lineCap="round";
            ctx.moveTo(0, 10);
            ctx.lineTo(0, -r/2)
            ctx.stroke();
            ctx.restore();
        }
        
        // 画分针
        function drawMinute(minute) {
            ctx.save()
            ctx.beginPath();
            var rad = 2*Math.PI/60 * minute;
            ctx.rotate(rad);
            ctx.lineWidth = 3;
            ctx.lineCap = 'round';
            ctx.moveTo(0, 10);
            ctx.lineTo(0, -r+40);
            ctx.stroke();
            ctx.restore();
        }
        
        // 画秒针
        function drawSecond(second) {
            ctx.save()
            ctx.beginPath();
            ctx.fillStyle = 'red';
            var rad = 2*Math.PI/60 * second;
            ctx.rotate(rad);
            ctx.lineWidth = 1;
            ctx.lineCap = 'round';
            ctx.moveTo(-2, 20);
            ctx.lineTo(2, 20);
            ctx.lineTo(1, -r+18)
            ctx.lineTo(-1, -r+18)
            ctx.fill();
            ctx.restore();
        }
        
        // 画圆点
        function drawDot() {
            ctx.beginPath();
            ctx.fillStyle = '#fff';
            ctx.arc(0, 0, 3, 0, 2*Math.PI, false);
            ctx.fill();
        }
        
//        drawBackground();
//        drawDot()
        
        function draw() {
            // 
            ctx.clearRect(0, 0, width, height)
            var now = new Date()
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            drawBackground();
            drawHour(hour,minute)
            drawMinute(minute)
            drawSecond(second)
            drawDot()
            ctx.restore()
        }
        
        draw()
        setInterval(draw, 1000)
    </script>

</html>

html5 之 Canvas

`CANVAS`时钟

荆棘鸟

引用和评论

url参数获取

JavaScript实现的水果忍者游戏，支持鼠标操作

qml实现头像裁剪功能

突破Canvas困境：低成本实现Web端流程图设计功能之道

html5 之 Canvas

CANVAS时钟

荆棘鸟

引用和评论

url参数获取

JavaScript实现的水果忍者游戏，支持鼠标操作

qml实现头像裁剪功能

突破Canvas困境：低成本实现Web端流程图设计功能之道

`CANVAS`时钟