HTML5之Canvas

2016年12月16日 305点热度 0人点赞 0条评论

点击关注▲一灯科技

知识 | 经验| 资讯 | 资料 四大版块

中国专业的Web前端高端培训机构

图片

原文作者:Iris_mao(简书作者)

原文接:http://www.jianshu.com/p/a6436969859d


Canvas API

在网上使用cnavas元素,会建一矩形区域,默大小是300*150px

从左上角开始的,x轴沿着水平方向向右延伸,y轴垂直方向向下延伸

检测浏览器对canvas的支持情况:

<!DOCTYPE html>

<html>

<head>

  <metacharset="UTF-8">

  <title>Canvas API</title>

</head>

<body>

<div id="support"></div>

</body>

<script>

  try{

     document.createElement("canvas").getContext("2d");

     document.getElementById("support").innerHTML="HTML5Canvas is supported in you browser.";

  }catch (e){

      document.getElementById("support").innerHTML="HTML5Canvas is not supported in you browser.";

  }

</script>

</html>

绘制简单的对角线:(对上下文的操作不会立即反应在页面上,只有对路径应用绘制(stroke)或填充(fill)方法果才会示出来)

以直接制的方式来

 

 <!DOCTYPE html>

 <html>

<head>

  <metacharset="UTF-8">

  <title>CanvasAPI</title>

</head>

<body>

  <canvasid="diagonal" style="border: 1px solid;"height="200" width="200"></canvas>

</body>

<script>

  function drawDiagonal() {

      //取得canvas元素及其绘图上下文

      var canvas =document.getElementById('diagonal');

      var context =canvas.getContext('2d');

 

      //用绝对建一条路径

      context.beginPath();

      context.moveTo(70,140);

      context.lineTo(140,70);

 

      //将线绘制到canvas上

      context.stroke();

  }

 

 window.addEventListener("load",drawDiagonal,true);

</script>

</html>

转换的方法制(translate() 方法重新映射画布上的 (0,0) 位置。)

 

 //保存你当前绘图

      context.save();

 

      //向右下方移动绘图上下文

      context.translate(70,140);

 

      //以原点起点,制与前面相同的线

      context.beginPath();

      context.moveTo(0,0);

      context.lineTo(70,-70);

      context.stroke();

 

      //恢复原有的绘图

      context.restore();

下面以带树的跑道例,写一段完成的程序

html部分代

<canvas id="trails" style="border: 1px solid;"height="500" width="400"></canvas>

JS部分代

 

//加载砾石背景

 var gravel = new Image();

 gravel.src ="gravel.jpg";

 gravel.onload = function () {

     drawTrails();

 };

 

 function createCanopyPath(context){

     //绘制树冠

     context.beginPath();

     context.moveTo(-25, -50);

     context.lineTo(-10, -80);

     context.lineTo(-20, -80);

     context.lineTo(-5, -110);

     context.lineTo(-15, -110);

 

     //树的顶点

     context.lineTo(0, -140);

     context.lineTo(15, -110);

     context.lineTo(5, -110);

     context.lineTo(20, -80);

     context.lineTo(10, -80);

     context.lineTo(25, -50);

 

     //连接起点,闭合路径

     context.closePath();

 }

 

 function drawTree(context) {

     //给树创建树影

     context.save();

     //x值随着Y值得增加而增加,借助拉伸变换,可以创建一棵用作阴影的倾斜的树,应用了变换以后,所有坐标都与矩阵相乘

     context.transform(1, 0, -0.5,1, 0, 0);

 

     //在Y轴方向,将阴影的高度压缩为原来的60%

     context.scale(1, 0.6);

 

     //使用透明度20%的黑色填充

     context.fillStyle ='rgba(0,0,0,0.2)';

     context.fillRect(-5, -50, 10,50);

     //使用已有的阴影效果重新

     createCanopyPath(context);

     context.fill();

 

     //恢复之前的canvas状

     context.restore();

     createCanopyPath(context);

 

     //创建用作树干纹理的三阶水平渐变

     var trunkGradient =context.createLinearGradient(-5, -50, 5, -50);

 

     //树干的左侧边缘是一般程度的棕色

     trunkGradient.addColorStop(0,'#663300');

 

     //树干中间偏左的位置颜色要淡一些

    trunkGradient.addColorStop(0.4, '#996600');

 

     //树干右侧边缘的颜色要深一些

     trunkGradient.addColorStop(1,'#552200');

 

     //使用渐变色填充

     context.fillStyle =trunkGradient;

     context.fillRect(-5, -50, 10,50);

 

     //接下来,建垂直渐变,用以作冠在干上投影

     var canopyShadow =context.createLinearGradient(0, -50, 0, 0);

 

     //投影渐变的起点是透明度设为50%的黑色

     canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.5)');

 

     //方向垂直向下,渐变色在很短的距离内迅速渐变至完全透明,度之外的干没有投影

     canopyShadow.addColorStop(0.2,'rgba(0,0,0,0.0)');

 

     //在干上填充投影渐变

     context.fillStyle =canopyShadow;

     context.fillRect(-5, -50, 10,50);

 

     //加宽线

     context.lineWidth = 4;

 

     //平滑路径的接合点 round/bevel/miter

     context.lineJoin = 'round';

 

     //将色改棕色

     context.strokeStyle = '#663300';

     context.stroke();

 

     //将填充色为绿色并填充冠(填充是在绘图之前行的,所以不会覆盖线度,如果在绘图之后填充,就会覆盖线度)

     context.fillStyle ="#339900";

     context.fill();

 }

 

 function createCurvePath(context){

 

     //保存canvas的状制路径

     context.save();

 

     context.translate(-10, 350);

     context.beginPath();

 

     //第一条曲线向右上方弯曲(第一xy坐是曲线的控制点,第二xy坐是曲线点)

     context.moveTo(0, 0);

     context.quadraticCurveTo(170,-50, 260, -190);

 

     //第二条曲线向右下方弯曲

     context.quadraticCurveTo(310,-250, 410, -250);

 

     //用背景替代棕色粗线

     context.strokeStyle =context.createPattern(gravel, 'repeat');

 

     //使用棕色的粗线条来制路径

//       context.strokeStyle='#663300';

     context.lineWidth = 20;

     context.stroke();

 

     //恢复之前的canvas状

     context.restore();

 }

 

 function drawTrails() {

     var canvas =document.getElementById('trails');

     var context =canvas.getContext('2d');

     //在(130,250)的位置制第一颗树

     context.save();

     context.translate(130, 250);

     drawTree(context);

     //绘制当前路径

//        context.stroke();

     context.restore();

 

     //在(260,500)的位置制第二颗树

     context.save();

     context.translate(260, 500);

 

     //第二颗树高分放大至原来的2倍

     context.scale(2, 2);

     drawTree(context);

     context.restore();

 

     //绘制小路

     createCurvePath(context);

 

     //在canvas上标题文本

     context.save();

 

     //字号60px,字体impact

     context.font = "60pximpact";

 

     //将文本填充棕色

     context.fillStyle = '#996600';

     //将文本居中对齐

     context.textAlign = 'center';

     //设置文字阴影的颜色为黑色,透明度为20%

     context.shadowColor ='rgba(0,0,0,0.2)';

 

     //将阴影向右移15px,向上移10px

     context.shadowOffsetX = 15;

     context.shadowOffsetY = -10;

 

     //轻微模糊阴影

     context.shadowBlur = 2;

 

     //在canvas顶部中央的位置以大字体的形式显示文本

     context.fillText('HappyTrails!', 200, 60, 400);

     context.restore();

 }

附示例程序中用到的

 

gravel.jpg

程序技点分解:

 

树冠的绘制是通过moveTo lineTo的方法,在原点制,然后用translate方法移位置

样式的修改:lineWidth(线宽) lineJoin(接点的平滑度) strokeStyle(色) lineCap(线条末端)

线制用quadraticCurveTo方法,第一参数是弯曲点,第二参数是

渐变的制作分三步:1、渐变对象 trunkGradient

2、为渐对色,指明渡方式 addColorStop

3、在context上填充式或描边样渐变 fillStyle

4、rgba(R,G,B,A),最后一个是Alph通道透明度

背景的添加用 createPattern(img,'repeat/repeat-x/repear-y/no-repeat')

缩放 scale

制作阴影 transfom(a,b,c,d,e,f) 要了解矩的概念

Canvas文本 fillText strokeText

应用阴影:shadowColor(色) shadowOffsetX(向右阴影像素)shadowOffsetY(向下阴影像素) shadowBlur(模糊

 

图片

67180HTML5之Canvas

这个人很懒,什么都没留下

文章评论