本文共 8433 字，大约阅读时间需要 28 分钟。

HTML5 Canvas

• Canvas 是 HTML5 中提供的画布，通过 JS 代码可以实现控制各种图形、制作动画、远程可视化展示等应用

Canvas 绘图的基本流程

• 创建画布区域，获取Canvas元素
• 获取Canvas的上下文环境对象
• 使用上下文环境对象绘制图形

Canvas 绘图的基本语法

• HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像
• 画布是一个矩形区域，可以控制其每一像素
• canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
• canvas 元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成

    -- 规定元素的 id、宽度和高度

Canvas 绘图常用属性方法

• Canvas 绘图常用属性方法 1

• Canvas 绘图常用属性方法 2

• Canvas 绘图常用属性方法 3

Canvas 绘图线段和文字

• 移动到起点：moveTo( )
• 绘制路径：lineTo( )
• 描边：stroke( )
• 填充：fill( )
• 开启新路径（新的图形状态）: beginPath( )
• 结束路径：closePath( )
• 绘制文字：strokeText( )

绘制线段

window.onload = function () {
       //1.获取canvas对象    var canvas = document.querySelector('canvas')    canvas.style.border = '5px solid #333'    //2.创建上下文对象    var ctx = canvas.getContext('2d')    //3.绘图    ctx.moveTo(100, 100)      //移动到开始位置    ctx.lineTo(800, 100)      //绘制线段    ctx.lineTo(800, 300)    ctx.lineTo(100, 300)    ctx.lineTo(100, 100)    ctx.strokeStyle = "red"  //设置线段的颜色        ctx.lineWidth = 10       //设置线段的粗细    ctx.stroke()          //上色    // ctx.fill()              //    ctx.beginPath()         //开启一个新图形的绘制    ctx.moveTo(100, 400)    ctx.lineTo(800, 400)    ctx.strokeStyle = 'blue'    ctx.stroke()}

绘制文字

window.onload = function(){
       //1.获取canvas对象    var canvas = document.querySelector('canvas')    //2.创建上下文对象    var  ctx = canvas.getContext('2d')    //3.绘图    ctx.font = "18px blod 黑体"     //设置字体    ctx.textAlign = "center"    // ctx.strokeText('我是Canvas绘制的文字',100,100)    ctx.fillText('我是Canvas绘制的文字',100,100)}

绘制围棋棋盘练习

window.onload = function(){
       //1.获取canvas对象    var canvas = document.querySelector('canvas')    canvas.style.border = '4px solid #000'    //2.创建上下文对象    var  ctx = canvas.getContext('2d')    //3.绘图    var cellWidth = 10    var cellHeight = 10    for(var i = 0 ; i < 19 ; i++){
           //绘制水平线        ctx.moveTo(0,cellHeight * i)        ctx.lineTo(180,cellHeight*i)        //绘制垂直线        ctx.moveTo(cellWidth * i,0)        ctx.lineTo(cellWidth * i ,180)    }    ctx.lineWidth = 0.5    ctx.stroke()}

Canvas 绘制图形

• 描边矩形
  • strokeRect（顶点X坐标，顶点Y坐标，宽度，高度）
• 填充矩形

window.onload = function(){
       //1.获取canvas对象    var canvas = document.querySelector('canvas')    //2.创建上下文对象    var  ctx = canvas.getContext('2d')    //3.绘图    ctx.rect(0,0,200,100)    ctx.stroke()    ctx.beginPath()    ctx.rect(0,120,200,100)    ctx.fill()}

• 绘制圆弧
  • arc(圆心X坐标，圆心Y坐标，半径，开始角度，结束角度，方向)
  • 角度的计算：顺时针为正，逆时针为负
  • 右侧: 0, 下方: 90, 上方: -90, 左侧: 180(-180)
  • 顺时针: false, 逆时针: true
• 填充扇形

window.onload = function(){
       //1.获取canvas对象    var canvas = document.querySelector('canvas')    //2.创建上下文对象    var  ctx = canvas.getContext('2d')    //3.绘图    // 圆弧    ctx.arc(100,100,50,0,90*Math.PI/180,true)    ctx.stroke()    ctx.beginPath()    // ===============================================    // 扇形    ctx.moveTo(200,100)     //先移动到圆心    ctx.arc(200,100,50,0,45*Math.PI/180,false)    ctx.fill()    //弧度：180=PI,360 = 2*PI}

地球公转练习

window.onload = function () {
       //1.获取Canvas对象    var canvas = document.querySelector('#canvas')    //2.获取canvas的上下文环境对象    var context = canvas.getContext('2d')    //3.定时器绘图    setInterval(function(){
           draw(context)    },50)}var angel = 0//绘制图形function draw(context){
       context.clearRect(0, 0, 500, 500);      //清空画布上的内容        //1.绘制太阳    context.beginPath();    context.arc(250,250,30,0,360 * Math.PI / 180)    context.fillStyle = "#f00"    context.fill();    context.closePath();        //2.绘制轨迹    context.beginPath();    context.strokeStyle = '#fff'    context.arc(250,250,200,0,360 * Math.PI / 180)    context.stroke()    context.closePath();        //3.绘制地球    context.save()    context.translate(250,250)                  //把原点移到太阳的中心点    context.rotate(angel * Math.PI / 180)       //旋转画布    context.beginPath();    context.arc(200,0,10,0,360 * Math.PI / 180) //在新的画布坐标系中绘制地球    context.fillStyle = "#00f"    context.fill();    context.closePath();    context.restore();                          //将画布坐标系还原为原来的状态    angel++}

扇形统计图练习

window.onload = function () {
     var data = [    {
    value: 0.15, name: '视频广告', color: '#f00', dist:100 },    {
    value: 0.20, name: '联盟广告', color: '#000', dist:120 },    {
    value: 0.20, name: '邮件营销', color: '#f0f', dist:130 },    {
    value: 0.18, name: '直接访问', color: '#ff0', dist:150 },    {
    value: 0.27, name: '搜索引擎', color: '#0ff', dist:180 }  ]  var startAngel = -90;  var context = document.querySelector('#canvas').getContext('2d')  for (var i = 0; i < data.length; i++) {
       var angel = data[i].value    var angelName = data[i].name    var angelColor = data[i].color    var angelDist = data[i].dist    context.beginPath();    context.moveTo(300,300);    context.fillStyle = angelColor;    context.arc(300,300,angelDist,startAngel*Math.PI/180,      (startAngel+angel*360)*Math.PI/180)    context.fill()    var txtAngel = startAngel + (angel*360 / 2)    var x = 300 + Math.cos(txtAngel * Math.PI/180) * (angelDist + 20)    var y = 300 + Math.sin(txtAngel * Math.PI/180) * (angelDist + 20)    context.beginPath()    context.moveTo(300,300)    context.lineTo(x,y);    context.strokeStyle = angelColor;    context.stroke()    context.textBaseline='middle';    if(txtAngel > -90 && txtAngel < 90){
          context.textAlign='left';    }else{
           context.textAlign='right';    }    context.fillText(angelName + (angel*100) + '%', x, y);    context.fill()    startAngel += angel*360  }}

Canvas 样式设置

• 阴影设置
  • shadowOffsetX/Y(形状与阴影的水平/竖直距离)
  • shadowColor(阴影颜色)
  • shadowBlur(阴影的模糊级别)
• 渐变设置
  • createLinearGradient(x0,y0,x1,y1)(线性渐变)
    • x0 (渐变开始点的 x 坐标)
    • y0 (渐变开始点的 y 坐标)
    • x1 (渐变结束点的 x 坐标)
    • y1 (渐变结束点的 y 坐标)
  • createRadialGradient(x0,y0,r0,x1,y1,r1)(放射状/环形渐变)
    • x0 (渐变开始圆的 x 坐标)
    • y0 (渐变开始圆的 y 坐标)
    • r0 (开始圆的半径)
    • x1 (渐变的结束圆的 x 坐标)
    • y1 (渐变的结束圆的 y 坐标)
    • r1 (结束圆的半径)

window.onload = function(){
       //1.获取canvas对象    var canvas = document.querySelector('canvas')    //2.创建上下文对象    var  ctx = canvas.getContext('2d')    //3.绘图    ctx.rect(0,0,100,100)    ctx.shadowOffsetX = 10    ctx.shadowOffsetY = 10    ctx.shadowColor = 'red'    ctx.shadowBlur = 15    //设置线性渐变    var color = ctx.createLinearGradient(0,0,0,100)    color.addColorStop(0,'#f00')    color.addColorStop(0.5,'#00f')    color.addColorStop(1,'#0f0')    ctx.fillStyle = color    ctx.fill()}

Canvas 绘制图片

• cxt.drawImage(image,dx,dy)
  • image是具体的图像
  • dx,dy是图像的参考点坐标
• cxt.drawImage(image,dx,dy,dw,dh)
  • dw,dh是图像缩放后的宽度和高度
• cxt.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
  • 前四个参数是指截取的源图像参考点和宽高

window.onload = function(){
       //1.获取canvas对象    var canvas = document.querySelector('canvas')    //2.创建上下文对象    var  ctx = canvas.getContext('2d')    //3.绘图    var img = document.createElement('img')    // img.src = 'images/map.jpg'    // ctx.drawImage(img,0,0) // 异步问题    img.src = 'images/up.png'    //图片动态创建加载，需要设置load事件    img.onload = function(){
     // 图片加载成功后        // ctx.drawImage(img,0,0) //1.不考虑图片和canvas容器的差异，以canvas容器的尺寸为标准        // ctx.drawImage(img,0,0,1000,800) //完整显示图片内容，根据参数进行缩放        ctx.drawImage(img,0,0,105,105,100,100,105,105)  //截取图片中部分内容，放入canvas的指定位置    }}

Canvas 变换

• 平移

  • context.translate(x,y)
  • 添加到水平坐标（x）上的值
  • 添加到垂直坐标（y）上的值

• 旋转

  • context.rotate(angle)
  • rotate() 方法旋转当前的绘图

• 缩放

  • context.scale(scalewidth,scaleheight)
  • scalewidth (缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推))
  • scaleheight (缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, etc))

• 保存状态

  • save()
  • 保存当前环境的状态

• 恢复状态

  • restore()
  • 返回之前保存过的路径状态和属性

window.onload = function(){
       //1.获取canvas对象    var canvas = document.querySelector('canvas')    //2.创建上下文对象    var ctx = canvas.getContext('2d')    //3.绘图    ctx.rect(0,0,100,100)    ctx.stroke()    ctx.clearRect(0,0,110,110)  //清除原来的图形    ctx.save()                  //保存当前坐标系    ctx.beginPath()    ctx.translate(300,0)        //坐标系往右移动300px    ctx.rotate(45*Math.PI/180)  // 旋转45度    ctx.scale(1,2)              // 放大    ctx.rect(0,0,100,100)    ctx.stroke()    ctx.restore()               //还原之前的坐标系    ctx.rect(0,0,50,50)    ctx.stroke()    //保存canvas的整体图像到base64    var imgStr = canvas.toDataURL('image/jpg')    document.querySelector('img').src = imgStr}

总结

• HTML5 Canvas 功能强大，做个学习笔记

转载地址：http://kcqwi.baihongyu.com/