HTML5-Canvas

Canvas绘图

绘制线段

HTML结构

<canvas id="diagonal" width="400px" height="400px">
    您的浏览器不支持!
</canvas>

通过css方式可以为canvas增加边框，设置内边距、外边距等，其中某些样式还将被canvas本身继承

绘制线

var canvas = document.querySelector('canvas#diagonal');
var context = canvas.getContext('2d');

context.beginPath(); //告知canvas对象做好绘制图像准备
context.moveTo(0, 0); //移动画笔到开始处
context.lineTo(300, 300); //告知画笔将要绘制的直线的终点

context.stroke(); //执行绘制

* getContext传递webgl将支持3D绘图
* stroke(); 绘制线
* translate(100, 100); 指定起始点
* scale(); 做图形的变化
* save(); 保存当前绘制的状态
* restore(); 恢复原有保存的状态
* closePath(); 将起始坐标当作绘制终点
* linewidth 线的宽度
* lineJoin 线的结合点，round(圆角)，bevel(切线)，miter(默认)
* strokeStyle 线的颜色
* linCap 没有闭合线的样式
* fill() 执行填充
* fillStyle 指定填充色
* fillRect() 绘制填充矩形，参数是起始点和宽高
* strokeRect() 非填充矩形
* clearRect() 指定矩形区域绘制将被清除
* quadraticCurveTo() 绘制曲线，指定控制点和终点
* drawImage() 插入已经存在的图像，并指定宽高
* createLinearGradient() 绘制线性渐变，指定起始和终点
* addColorStop() 渐变过程中某一色值
* createRadialgradient() 放射渐变，指定两个圆的圆心
* createPattern() 将已有图像当作颜料，参数为图像的对象，平铺方式
* rotate() 指定角度进行图像的旋转
* fillText() 填充文字，文本，位置，最大宽度
* strokeText() 非填充文字
* font 设置文字大小和字体
* textAlign 对齐方式
* textBaseLine 垂直对齐方式
* shadownColor 阴影颜色
* shadownOffsetX 水平偏移
* shadownOffsetY 垂直偏移
* shadownBlur 模糊值
* toDataUrl() URL格式的Canvas数据

绘制矩形

var canvas = document.querySelector('canvas#diagonal');
var context = canvas.getContext('2d');

context.fillRect(0, 0, 100, 100);
context.strokeRect(120, 0, 100, 100);

context.fillStyle = "red";
context.strokeStyle = "blue";
context.fillRect(0, 120, 100, 100);
context.strokeRect(120, 120, 100, 100);

context.fillStyle = "rgba(255, 0, 0, .2)";
context.strokeStyle = "rgba(255, 0, 0, .2)";

context.fillRect(240, 0, 100, 100);
context.strokeRect(240, 120, 100, 100);
context.clearRect(0, 0, canvas.width, canvas.height)

绘制圆弧

• x:圆心的x坐标
• y:圆心的y坐标
• straAngle:开始角度
• endAngle:结束角度
• anticlockwise:（true）为逆时针，(false)为顺时针

绘制圆形

var canvas = document.querySelector('canvas#diagonal');
var context = canvas.getContext('2d');

context.beginPath();
context.arc(200, 200, 100, 0, Math.PI * 2, true);
context.closePath();

context.fillStyle = "rgba(0, 255, 0, 0.25)";
context.fill();

绘制圆弧

var canvas = document.querySelector('canvas#diagonal');
var context = canvas.getContext('2d');

context.beginPath();
context.arc(100, 150, 50, 0, Math.PI/2 , false);
context.strokeStyle = 'rgba(255,0,0,0.25)'
/*context.closePath();*/
context.stroke();

绘制阴影

• context.shadowOffsetX :阴影的横向位移量（默认值为0）
• context.shadowOffsetY :阴影的纵向位移量（默认值为0）
• context.shadowColor :阴影的颜色
• context.shadowBlur :阴影的模糊范围（值越大越模糊）
  var canvas = document.querySelector(‘canvas#diagonal’);
  var context = canvas.getContext(‘2d’);
  context.shadowOffsetX = 10;
  context.shadowOffsetY = 10;
  context.shadowColor = ‘rgba(100, 100, 100, .5)’;
  context.shadowBlur = 1.5;
  context.fillStyle = “rgba(255, 0, 0, .5)”;
  context.fillRect(100, 100, 200, 100);

渐变色

线性渐变

线性渐变createLinearGradient(xStart,yStart,xEnd,yEnd)
线性渐变颜色addColorStop(offset,color)

• xstart:渐变开始点x坐标
• ystart:渐变开始点y坐标
• xEnd:渐变结束点x坐标
• yEnd:渐变结束点y坐标
• offset:设定的颜色离渐变结束点的偏移量(0~1)

• color:绘制时要使用的颜色

  var canvas = document.querySelector('canvas#diagonal');
  var context = canvas.getContext('2d');
  
  var G_linear = context.createLinearGradient(0, 0, 0, 300);
  G_linear.addColorStop(0, 'rgba(255, 0, 0, 1)');
  G_linear.addColorStop(0.5, 'rgba(0, 255, 0, 1)');
  G_linear.addColorStop(1, 'rgba(0, 0, 255, 1)');
  context.fillStyle = G_linear;
  context.fillRect(0, 0, 400, 300);
  

发散渐变

径向渐变（发散）createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd)
径向渐变（发散）颜色addColorStop(offset,color)

• xStart:发散开始圆心x坐标
• yStart:发散开始圆心y坐标
• radiusStart:发散开始圆的半径
• xEnd:发散结束圆心的x坐标
• yEnd:发散结束圆心的y坐标
• radiusEnd:发散结束圆的半径
• offset:设定的颜色离渐变结束点的偏移量(0~1)

• color:绘制时要使用的颜色

  var canvas = document.querySelector('canvas#diagonal');
  var context = canvas.getContext('2d');
  
  var g1 = context.createRadialGradient(200, 150, 0, 200, 150, 100);
  g1.addColorStop(0.1, 'rgba(255, 0, 0, 1)');
  g1.addColorStop(1, 'rgba(50, 0, 0, 1)');
  context.fillStyle = g1;
  context.beginPath();
  context.arc(200, 200, 100, 0, Math.PI * 2, true);
  context.closePath();
  context.fill();
  

写字

var canvas = document.querySelector('canvas#diagonal');
var context = canvas.getContext('2d');

context.font = "60px impact";
context.fillStyle = "#996600";
context.textAlign = "center";

context.fillText('辛丙亮', 200, 60, 400);

使用已有文件

插入已有的图像

• context.drawImage(image,x,y)
• image:Image对象var img=new Image(); img.src=”url(…)”;
• x:绘制图像的x坐标

• y:绘制图像的y坐标

  var canvas = document.querySelector('canvas#diagonal');
  var context = canvas.getContext('2d');
  
  var img = new Image();
  img.src = 'weather.png';
  
  context.fillStyle = "#eeeeff";
  context.fillRect(0, 0, 400, 400);
  
  context.drawImage(img, 0, 0, 300, 300);
  

使用图片作为样式源

context.createPattern(image,type)
* image 使用的图像资源
* type 重复方式、repeat、repeat-x、repeat-y、no-repeat

    var canvas = document.querySelector('canvas#diagonal');
    var context = canvas.getContext('2d');

    var img = new Image();
    img.src = 'weather.png';

    var handle = context.createPattern(img, 'repeat');

    context.fillStyle = handle;
    context.fillRect(0, 0, 400, 400);

裁剪

var canvas = document.querySelector('canvas#diagonal');
var context = canvas.getContext('2d');

var img = new Image();
img.src = 'weather.png';

context.fillStyle = "black";
context.fillRect(0, 0, 400, 400);
context.arc(150, 150, 100, 0, Math.PI * 2, true);
context.closePath();
context.clip();
context.drawImage(img,0,0);