HTML5项目实例

HTML5项目实例

一、卧龙首页

二、Canvas画图
canvas 元素用于在网页上绘制图形。

1. 基本图形、曲线的绘制
   (1) 画直线
   (2) 画三角形
   (3) 画矩形
   (4) 画圆形
   (5) 画二次、三次贝塞尔曲线

// 定义一个画图区域 canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
<canvas id="andy" width="400px” height="200px” style="border: 1px solid black;">如果你看到了这段文字，说明你需要升级浏览器了</canvas>
<br><input type="button" value="清空" onclick="clearCanvas()">

<script type="text/javascript">

    var canvas = document.getElementById('andy');
    // 判断浏览器是否支持canvas
    if(canvas.getContext) {
        console.log('支持Canvas');
    }else {
        console.log('不支持Canvas');
    }

    // 返回一个HTML5对象CanvasRenderingContext2D对象
    // canvas 2d上下文，绘画工具
    var context = canvas.getContext('2d');

    // 路径边缘样式
    context.strokeStyle = '#ff0000';
    // 填充样式
    context.fillStyle = '#ff0000';
      // 线宽
        context.lineWidth = 10;    

     // 画直线
        // 开始路径
        context.beginPath();
     // 起点 （画布上的点）
     context.moveTo(0, 0);
     // 终点
     context.lineTo(200, 100);
     // 描边画线
     context.stroke();
        // 结束路径
        context.closePath();    

     // 三角形
     context.beginPath();
     context.moveTo(40, 40);
     context.lineTo(80, 80);
     context.lineTo(0, 80);
        // 可自动关闭路径
        context.closePath();        
        // 描边划线
     context.stroke();

        // 填充
     //context.fill();


     // 填充 矩形
         context.beginPath();
        //1. 线 起始位置x,y 以及宽高
//      context.strokeRect(100,50,200,100);
        // 2.填充
 //  context.fillRect(100, 50, 200, 100);
    // 3.自己设置线还是填充
     context.rect(0, 0, 100, 100);
     context.closePath();
     context.fill();


     // 画圆
     // 开始一个路径
     context.beginPath();
     // 制定弧的路径  圆心，半径，开始弧度，结束弧度，是否顺时针
     context.arc(200, 100, 50, 0, Math.PI * 2, true);
     // 结束一个路径
     context.closePath();
     // 填充
     //context.fill();
     // 画线
     context.stroke();


     // 贝塞尔曲线
     // 二次贝塞尔曲线 （一个控制点 控制弧的形状）
     var pointX = 75;
     var pointY = 55;

     context.beginPath();
        // 起始位置
     context.moveTo(0, 200);
        // 前两个参数是控制点 后面的参数是结束为止
     context.quadraticCurveTo(pointX, pointY, 400, 200);
     context.stroke();

        // 演示控制点的作用
     context.beginPath();
     context.moveTo(0, 200);
     context.lineTo(pointX, pointY);
     context.lineTo(400, 200);
     context.stroke();


    // 三次贝塞尔曲线 （两个控制点）
    var pointX1 = 55;
    var pointY1 = 55;
    var pointX2 = 85;
    var pointY2 = 55;

    context.beginPath();
    context.moveTo(0, 200);
    context.bezierCurveTo(pointX1, pointY1, pointX2, pointY2, 400, 200);
    context.stroke();

    //演示控制点
    context.beginPath();
    context.moveTo(0, 200);
    context.lineTo(pointX1, pointY1);
    context.lineTo(pointX2, pointY2);
    context.lineTo(400, 200);
    context.stroke();

    function clearCanvas() {
    
            // 清空画布
        context.clearRect(0, 0, canvas.width, canvas.height);
    }

</script>
2. Canvas状态的保存与恢复
<canvas id="andy" width="400" height="600" style="border: 1px solid black"></canvas>

<script type="text/javascript">

    // 获取Canvas
    var canvas = document.getElementById('andy');
    // 获取上下文
    var context = canvas.getContext('2d');

    // 第一次设置轮廓样式和填充样式
    context.strokeStyle = 'red';
    context.fillStyle = 'yellow';

    // 画第一个矩形
    context.fillRect(20, 20, 100, 50);
    context.strokeRect(20, 20, 100, 50);

    // 保存Canvas状态 保存的内容有颜色设置 宽度设置 平移旋转 缩放设置等
    context.save();

    // 第二次设置轮廓样式和填充样式
    context.strokeStyle = 'blue';
    context.fillStyle = 'green';
    /