二、HTML5新特性—网页绘图-Canvas

网页绘图表现非常强大—大型游戏 / 3D。

一、网页绘图的分类

• 特效
  视频网站弹幕；雪花飘落；弹出式广告...
• 功能
  电影网站订座；销售统计图；天气；金融...
• 游戏
  休闲小游戏；跳一跳；故事类...

二、网页绘制开发方式

• 图形非常复杂，功能简单—可用第三方绘图
  D3 — https://d3js.org/
  echartsjs — https://www.echartsjs.com/zh/index.html
  cocos — https://www.cocos.com/docs/
• 功能非常复杂，图形简单—可自己开发

三、网页中绘图三种技术

• canvas：用像素点组件2D位图图像
  特点：颜色非常细腻；
  缺点：不能放大和缩小(模糊)。
• svg：用线段组成2D矢量图图像
  特点：颜色单调；
  优点：可以任意放大和缩小不失真。
• webgl：3D位图

四、canvas (2D位图)

学习canvas特点：单词较多；坐标系；不要使用jquery

五、canvas开发流程 (基础)

1. 通过标签创建画布

<canvas id="c3" width="500" height="400"></canvas>

• canvas 要求标签需要指定高度和宽度，也可以用js指定
• 不能css单独指定宽度和高度，css会对图像缩放

2. 通过js获取画布元素

var c3=document.getElementById("c3")

3. 通过js依据画布元素获取画笔对象

var ctx=c3.getContext("2d")

• 2d：平面图形
• Context：上下文对象(画笔对象)

六、canvas开发—矩形

矩形绘制以左上角为基准点。

• 绘制空心矩形

ctx.strokeRect(x,y,w,h)
//x,y：空心矩形左上角位置
//w,h：空心矩形宽度和高度

• 绘制实心矩形

ctx.fillRect(x,y,w,h)
//四个参数与空心矩形相同

• 清空矩形范围内所有图形(橡皮)

ctx.clearRect(x,y,w,h)
//四个参数与空心矩形相同
//清空画布所有图形  ctx.clearRect(0,0,500,400)

• 设置空心样式

ctx.strokeStyle="#f00"

• 设置实心样式

ctx.fillStyle="#00f"

七、示例

<h3>矩形</h3>
    <canvas id="c3" width="500" height="400"></canvas>
    <script>
        var c3=document.getElementById("c3");
        var ctx=c3.getContext("2d");     
        //上下左右移动矩形
        //创建变量表示坐标x,y
        var x=0;
        var y=0;
        //创建变量表示x轴和y轴方向
        var xDirection=1;
        var yDirection=1;
        //创建定时器
        var t=setInterval(()=>{
            ctx.clearRect(0,0,500,400);
            x+=5*xDirection;
            y+=5*yDirection;
            ctx.strokeRect(x,y,100,80);
            if(x>=400){
                xDirection=-1;
            }else if(x<=0){
                xDirection=1;
            }
            if(y>=320){
                yDirection=-1;
            }else if(y<=0){
                yDirection=1;
            }
        },50)
    </script>