简单canvas入门

简单canvas入门

• 创建canvas以及初始化
  • <canvas id="canvas" width="1024" height="768"></canvas>
    注意这个width和height不带px等单位
  • JS初始化canvas
    • var canvas=document.getElementById('canvas');
    • var context=canvas.getContext('2d'); //使用context进行绘制
  • 获取canvas的宽度，高度以及上下文环境
    • canvas.width
    • canvas.height
    • canvas.getContext('2d')
• 绘制直线、多边形
  canvas是基于状态绘制的，使用context.beginPath()和context.closePath()
  • 绘制直线
    • context.beginPath() //开始路径设置
    • context.moveTo(100,100) //在（100，100）处放下一个点
    • context.lineTo(700,700) //设定从（100，100）向（700，700）划线
    • context.lineTo(100,700) //设定从（700，700）向（100，700）划线
    • context.closePath() //结束路径设置
    • context.lineWidth=5 //设置线条宽度
    • context.strokeStyle="#005588" //这个主要设置颜色
    • context.stroke() //下达开始绘图的命令
  • 填充颜色
    • context.fillStyle="rgb（2，100，30）" //填充颜色
    • context.fill() //执行填充
• 绘制弧和圆
  • Draw an arc
    • context.arc(
    • centerx, //圆中心x坐标
    • centery, //圆中心y坐标
    • radius, //圆半径
    • startingAngle, //开始弧度
    • endingAngle， //结束弧度
    • anticlockwise //是否逆时针，默认false
  • 圆弧度
    
  • closePath()
    • 表示结束当前路径
    • 如果当前路径没有闭合，就会自动帮助闭合
• 对当前画布指定区域进行一次刷新操作
  • context.clearRect（x，y，width，height）
• 获得当前上下文环境下的画布
  • context.canvas
• canvas中的内容
  canvas中内容只有在canvas不能正常显示时，浏览器才会显示出来的