Canvas 1

作者: 向上而活 | 来源:发表于2019-07-05 11:44 被阅读0次

android随笔之自定义View的Canvas用法
HTML5中canvas使用
Android 自定义View(学习整理基础用法)
HTML5 Canvas
Canvas绘制文字、设置阴影、创建路径绘制矩形和圆
HTML5-----Canvas 学习日记1
8个前端知识点：HTML5(canvas应用)
canvas基础学习笔记
canvas基础知识总结
android canvas

Canvas：画布，在HTML5中默认是一个300*150的inline-block。设定画布的宽和高不能使用CSS Style，只能使用width和height属性。

<canvas width="500" height="400">
        您的浏览器不支持Canvas标签！
  </canvas>

画布本身不能绘制内容，只用于承载被绘制的内容——使用画笔来往画布绘制内容。获得画笔使用原生JS：

var ctx = canvas.getContext('2d'); //绘图上下文对象,画布上所有内容的绘制都要依靠“绘图上下文”对象。

//画一条线的步骤：
//1、获取元素
var mycanvas=document.querySelectById('mycanvas');
//2、获取上下文 （画图的工具箱）
var ctx =  mycanvas.getContext('2d');
//3、移动画笔（画笔位置默认在 （0 ，0）的位置）
ctx.moveTo(100,100)
//4、绘制路经、轨迹(不会显示出来，只是设置需要画的线 是从哪里开始画，画到哪里)
ctx.lineTo(100,200);
//5、描边（根据上一步设置的轨迹，画线，这时能看到那条线了）
ctx.stroke()

Context对象常用的属性和方法：
常用属性：

fillStyle:"#000000"    填充样式
strokeStyle:"#000000"  描边/轮廓样式
font:"10px sans-serif" 
textAlign:"start"  
textBaseline:"alphabetic"  文本基线
globalAlpha:1  全局不透明度
lineWidth:1   线/描边的宽度
lineCap  线末端的类型
shadowOffsetX:0   阴影在X轴上的偏移量
shadowOffsetY:0  
shadowColor:"rgba(0, 0, 0, 0)"
shadowBlur:0   阴影模糊半径

常用方法：

常用方法：
arc()  绘制一个拱形/圆形
beginPath()  开始绘制一条路径——PS:钢笔工具
closePath()  闭合一条路径——PS
fill()  对路径进行填充
stroke() 对路径进行描边
moveTo() 移动到某一点
lineTo() 到另一个点绘制一条直线
fillRect()  填充一个矩形
strokeRect()  描边一个矩形
clearRect()  清空一个矩形范围内所有内容
fillText()   填充一个字符串
strokeText()  描边一个字符串
drawImage()  绘制图像

例子

<canvas id="c1" width="500" height="400"></canvas>
  <script>
    var ctx = c1.getContext('2d');

    //左上角填充一个红色的矩形100*80；
    ctx.fillStyle = '#f00';
    ctx.fillRect(0,0, 100,80);

    //右上角描边一个绿色的矩形100*80；
    ctx.lineWidth = 10;
    ctx.strokeStyle = '#0f0';
    ctx.strokeRect(500-200,100, 100,80);

    //描边+填充一个矩形100*80；
    ctx.fillRect(0, 320, 100, 80);
    ctx.strokeRect(0,320, 100, 100);

    //右下角描边+填充另一个颜色的矩形100*80；
    ctx.fillStyle = '#ff0';
    ctx.strokeStyle = '#00f';
    ctx.fillRect(500-100, 400-80, 100, 80);
    ctx.strokeRect(500-100, 400-80, 100, 80);

    // 正中央描边+填充与右下角完全一样的矩形
    ctx.shadowBlur = 20;
    ctx.shadowColor = '#aaa';
    ctx.shadowOffsetX = 20;
    ctx.shadowOffsetY = 20;
    ctx.fillRect(250-100/2, 200-80/2, 100, 80);
    ctx.strokeRect(250-100/2,200-80/2, 100, 80);
  </script>

<canvas id="c2" width="500" height="400"></canvas>
  <script>
    var ctx = c2.getContext('2d');

    //绘制绿色的背景
    ctx.fillStyle = '#0f0';
    ctx.fillRect(0,0,500, 400);

    //第一个眼睛
    ctx.clearRect(100,100,100,80);

    //第二个眼睛
    ctx.clearRect(300,100,100,80);

    //嘴巴
    ctx.clearRect(200,280,100,80);

  </script>

<body>
  <h2>练习：绘制一个左右晃动的矩形</h2>
  <canvas id="c3" width="500" height="400"></canvas>
  <script>
    var ctx = c3.getContext('2d');

    ctx.fillStyle = '#0a0';

    var x = 0;
    var xDirection = 1; //只能取值1或-1
    //使用定时器不停的绘制新的矩形
    var timer = setInterval(function(){
      //清除已有的图形
      ctx.clearRect(0,0,500,400);
      //重新绘制新的矩形
      ctx.fillRect(x,0,100,80);
      x += 10*xDirection;
      if(x>=400){  //到最右边了
        xDirection = -1;
      }else if(x<=0) {  //到最左边了
        xDirection = 1;
      }
    },100);

  </script>

<body>
  <h2>练习：绘制一个斜向晃动的矩形</h2>
  <canvas id="c3" width="500" height="400"></canvas>
  <script>
    var ctx = c3.getContext('2d');

    ctx.fillStyle = '#a00';

    var x = 0;
    var xDirection = 1;

    var y = 0;
    var yDirection = 1;  //1或-1

    var timer = setInterval(function(){
      ctx.clearRect(0,0,500,400);
      ctx.fillRect(x,y,100,80);
      x += 10*xDirection;
      y += 10*Math.tan(Math.PI/6)*yDirection; //走出30度角

      //修改X轴行进方向
      if(x>500-100){
        xDirection = -1;
      }else if(x<=0){
        xDirection = 1;
      }
      //修改Y轴行进方向
      if(y>400-80){
        yDirection = -1;
      }else if(y<=0){
        yDirection = 1;
      }

    },100);

  </script>
</body>

<body>
  <h2>绘制矩形，填充一个渐变色</h2>
  <canvas id="c3" width="500" height="400"></canvas>
  <script>
    var ctx = c3.getContext('2d');

    //创建一个渐变对象,指定起点和终点
    var g = ctx.createLinearGradient(50,150,450,150);
    g.addColorStop(0, '#f00');    //0%:红色
    g.addColorStop(0.5, '#ff0');  //50%：黄色
    g.addColorStop(1, '#0f0');    //100%：绿色

    ctx.fillStyle = g; //'#f00';
    ctx.fillRect(250-400/2, 200-100/2, 400, 100)
    // ctx.strokeStyle = g;
    // ctx.strokeRect(50,150,400,100);
  </script>
</body>

<body>
  <h2>绘制文本</h2>
  <canvas id="c3" width="500" height="400"></canvas>
  <script>
    var ctx = c3.getContext('2d');

    ctx.textBaseline = 'bottom'; //设置文本基线为第4线
    ctx.font = '20px SimHei';

    //画布左上角的文本
    var str = 'ABCabcyjhg中国123';
    ctx.fillText(str, 0, 20);

    //画布右上角绘制文本
    //基于当前字体/大小计算出文本的宽度
    //var result = ctx.measureText(str);
    //console.log(result) // {width:xx}
    var txtWidth = ctx.measureText(str).width;
    ctx.strokeStyle = '#a00';
    ctx.strokeText(str, 500-txtWidth, 20);
  </script>
</body>

<body>
  <h2>作业题2 —— 根据动态数据绘制统计图</h2>
  <canvas id="c2">
    您的浏览器不支持Canvas标签！
  </canvas>
  <script>
    var data = [
      {label:'部门1', value:200},
      {label:'部门2', value:100},
      {label:'部门3', value:250},
      {label:'部门4', value:280},
      {label:'部门5', value:220},
      {label:'部门6', value:260}
    ];

    c2.width = 600;  //不要写为：'500px'
    c2.height = 400;
    var ctx = c2.getContext('2d');

    //绘制外围“边框”——矩形描边
    ctx.strokeRect(50,50,500,300);

    //主体宽度均分的份数：data.length*2 + 1 = 13
    var colWidth = 500/13;   //每个柱的宽度
    for(var i=0; i<data.length; i++){
      var x = (2*i+1)*colWidth + 50;
      var y = 400-50-data[i].value;
      var w = colWidth;
      var h = data[i].value;    //10:18
      //绘制每个柱的轮廓
      ctx.strokeRect(x, y, w, h);
      //为每个柱填充随机颜色
      var g = ctx.createLinearGradient(x,y,x,y+h);
      g.addColorStop(0,rc());
      g.addColorStop(1,'#fff');
      ctx.fillStyle = g;
      ctx.fillRect(x,y,w,h);
    }

    /**生成随机颜色的函数，返回值形如：rgb(xx,xx,xx)**/
    function rc(){
      var r = Math.floor( Math.random()*256 );
      var g = Math.floor( Math.random()*256 );
      var b = Math.floor( Math.random()*256 );
      return `rgb(${r},${g},${b})`;
    }
  </script>
</body>