HTML5 Canvas 基础笔记

HTML5 Canvas

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

Canvas 绘图的基本流程

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

Canvas 绘图的基本语法

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

<canvas id="myCanvas" width="200" height="100"></canvas> -- 规定元素的 id、宽度和高度
<script type="text/javascript">
	var c=document.getElementById("myCanvas"); -- JavaScript 使用 id 来寻找 canvas 元素
	var cxt=c.getContext("2d"); -- 创建 context 对象
	cxt.fillStyle="#FF0000"; -- fillStyle 方法将其染成红色
	cxt.fillRect(0,0,150,75); -- fillRect 方法规定了形状、位置和尺寸
</script>

Canvas 绘图常用属性方法

• Canvas 绘图常用属性方法 1

属性和方法	描述
strokeStyle	设置边框颜色
strokeRect( )	设置带边框的矩形
clearRect	清除指定矩形区域的像素
createLinearGradient	创建渐变对象
moveTo( )	绘制画笔到指定点位置
lineTo( )	绘制到指定坐标点的直线
arc( )	绘制圆形
stroke( )	直线描边
beginPath( )/closePath( )	图形路径开始和结束

• Canvas 绘图常用属性方法 2

属性和方法	描述
fillText( )	填充方式绘制文字
strokeText( )	描边方式绘制文字
translate( )	移动
scale( )	缩放
rotate( )	旋转
shadowOffsetX/Y	阴影与图形的水平/垂直距离
shadowColor	阴影的颜色
shadowBlur	阴影的模糊值

• Canvas 绘图常用属性方法 3

属性和方法	描述
drawImage( )	绘制图像
save( )	保存已绘制图形
restore( )	还原保存的图形
toDataURL( )	还原保存图像到浏览器

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 功能强大，做个学习笔记