• Chapter6 基本Canvas绘图

    普通类
    • 支持
    • 批判
    • 提问
    • 解释
    • 补充
    • 删除
    • Canvas起步

    <canvas>是一块画布。制定id width 和height即可

     

    画直线

     

    <script>

    window.onload = function() {
      var canvas = document.getElementById("drawingCanvas"); 

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

        //获得二维绘图上下文
     
      // (绘图的代码.  此处画两条线段)
      context.lineWidth = 20;  //设置线宽
      context.strokeStyle = "rgb(205,40,40)";   //设置线的颜色,还可以使用“#cd2828”
     
      context.moveTo(10,50);    //移动到起始点
      context.lineTo(400,50);    //画直线
      context.lineCap = "butt";   //线段两端是方头,“square”是加长方头,“round”是圆头
      context.stroke();    //画线
     
      context.beginPath();      //重新开始一个新线段的绘制,如果没有的话就会在画布上把原有的线段再重新绘制一遍
      context.moveTo(10,120);
      context.lineTo(400,120);
      context.lineCap = "round";
      context.stroke();
     
      context.beginPath();
      context.moveTo(10,190);
      context.lineTo(400,190);
      context.lineCap = "square";
      context.stroke();
    };

    </script>

     

     

    画三角形并填充

     

     window.onload = function() {

      var canvas = document.getElementById("drawingCanvas");

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

      context.moveTo(250,50);   //定位起点

      context.lineTo(50,250);    //绘制每一条线段

      context.lineTo(450,250);

      //context.lineTo(250,50);      因为closepath会自动在最后一个绘制点和起点间绘制一条线,因此这句话可以注释掉

      context.closePath();            //补充完成路径

      //填充颜色.  

      context.fillStyle = "blue";       //stroke不能给围成的三角形填色,必须使用fill()函数

      context.fill();

      // 画轮廓。将绘制轮廓放在填充颜色后面,否则的话轮廓线会有一部分被填充色覆盖掉

      context.lineWidth = 10;

      context.strokeStyle = "red";

      context.stroke(); 

    };

     

     

    绘制圆和弧线

     

     // 画弧线,其实就是圆的一部分.

    var centerX =150;

    var centerY = 300;

    var radius=100; 

    var startingAngle=1.25*Math.PI; //起始点

    var endingAngle=1.75*Math.PI;  //终点

      context.arc(centerX ,  centerY,  radius ,  startingAngle ,  endingAngle );

      context.fill();

      //context.closePath();     如果调用这个函数就是在起点和终点之间绘制一条直线,形成封闭的小半圆

      context.stroke();

     

     

    绘制曲线

     

    绘制曲线需要有控制点,如下图所示的贝塞尔曲线拥有两个控制点

     

    canvas = document.getElementById("canvas");ctx = canvas.getContext("2d");ctx.lineWidth = 6;ctx.strokeStyle = "#333";ctx.beginPath();ctx.moveTo(100, 250);ctx.bezierCurveTo(183, 89, 252, 435, 400, 250);  //context.bezierCurveTo(control1_x,control1_y,control2_x,control2_y,endPointX,endPointY);ctx.stroke();

     

    测试页面:http://blogs.sitepointstatic.com/examples/tech/canvas-curves/bezier-curve.html

     

    变换

     

    window.onload = function() {

      var canvas = document.getElementById("drawingCanvas");

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

      // 移动坐标系原点,因为之后的旋转是建立在新坐标系上的

      context.translate(100, 100);

      // 画10个正方形

      var copies = 10;

      for (var i=1; i<copies; i++) {

        //画正方形之前旋转坐标系,这个将总共的2PI均分为了10份,旋转角度计算得出

        context.rotate(2 * Math.PI * 1/(copies-1));

        // 画正方形

        context.rect(0, 0, 60, 60);

      }

      context.strokeStyle = "red";

      context.stroke();

    };

     

     

    注意:context.save()方法可以保存当前坐标系的状态。context.restore()方法则是返回保存过的前一个状态

    此外,还可以使用现有的绘图库,比如CanvasPlus(https://code.google.com/p/canvasplus/),它提供绘图的高级方法,比如画椭圆,在底层用js帮助实现;另外,将现场的图片嵌入到canvas里面也是可以的

     

    透明度

     

    方法一:context.fillStyle = "rgba(100,150,185,0.5)";   //与rgb()函数不同,第四个参数是设置透明度的,接受0-1之间的值,1为完全不透明,0表示完全不可见

    方法二:context.globalAlpha=0.5;     //这样后续的所有回吐操作都会取得相同的不透明度

    • 构建基本的画图程序

    http://www.prosetech.com/html5/Chapter%2006/Paint.html

     

    var canvas;

    var context;

    window.onload = function() {

      canvas = document.getElementById("drawingCanvas");

      context = canvas.getContext("2d");

      canvas.onmousedown = startDrawing;  //鼠标按下调用startDrawing找到新起点,做好绘图准备

      canvas.onmouseup = stopDrawing;    //鼠标松开停止绘图

      canvas.onmouseout = stopDrawing;   //鼠标离开canvas停止绘图

      canvas.onmousemove = draw;       //鼠标移动的时候画图

    };

    var isDrawing = false;

    function startDrawing(e) {

      // 设置为允许画图

      isDrawing = true;

      // 采用新的颜色和粗细创建新路径

      context.beginPath();

      //找到鼠标的起点位置(相对于canvas而言的) 

      context.moveTo(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);

    }

    function stopDrawing() {

      isDrawing = false;   //不允许画图

    }

    function draw(e) {

      if (isDrawing == true) {

        // 找到鼠标的新位置

        var x = e.pageX - canvas.offsetLeft;

        var y = e.pageY - canvas.offsetTop;

        //画起点到新位置的线段

        context.lineTo(x, y);

        context.stroke();

      }

    }

    // 记录上一个状态的颜色元素

    var previousColorElement;

    function changeColor(color, imgElement) {

      //更改颜色

      context.strokeStyle = color;

      // 将代表新选择的颜色的那个图片添加一个class值(加边框),以区别于其他选择

      imgElement.className = "Selected";

      // 将上一个状态的颜色的图片恢复到不选中的状态

      if (previousColorElement != null) previousColorElement.className = "";

      previousColorElement = imgElement;

    }

    //记录上一个状态的粗细元素,跟颜色的极其类似,不再注释

    var previousThicknessElement;

    function changeThickness(thickness, imgElement) { 

      context.lineWidth = thickness;

      imgElement.className = "Selected";

      if (previousThicknessElement != null) previousThicknessElement.className = "";

      previousThicknessElement = imgElement;

    }

    //清除Canvas

    function clearCanvas() {

      context.clearRect(0, 0, canvas.width, canvas.height);

    }

    //将画布保存为图片

    function saveCanvas() { 

      // 找到图片呈现的目标img元素.

      var imageCopy = document.getElementById("savedImageCopy");

      //将canvas内的信息呈现在这个元素中.这样得到的是png的图片,还可以传参数指定生成的格式 canvas.toDataURL(“image/jpeg”);

      imageCopy.src = canvas.toDataURL();   //实际上,在firefox中可以直接点击右键将canvas中的内容另存为图片,但是chrome和IE没有提供

      // 将img所在的DIV容器显示出来,这样图片就可见了

      var imageContainer = document.getElementById("savedCopyContainer");

      imageContainer.style.display = "block";

    }

    • 浏览器对Canvas的支持情况

    第三方插件模仿Canvas

    在IE7及IE8 中可以使用第三方的工具来模仿HTML5的canvas

    ExplorerCanvas(https://code.google.com/p/explorercanvas/)可以在IE7和IE8众模仿canvas,是Google天才工程师用javascript开发的

    需要在页面引用,使用IE的条件注释就可以正常使用了。早于IE9的版本才会实际引入这个脚本,这样之前的画图程序也能够在旧版本的IE中使用了

    <head>

        <title>...</title>

        <!--[if lt IE 9]>

            <script src="excanvas.js"></script>

        <![endid]-->

    </head>

    但是这个库不能实现高级的Canvas绘图功能。

    此外还有一些急于高性能的浏览器插件(https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills  这个网站上有列)

    可推荐FlashCanvas(http://flashcanvas.net/),但它依赖Flash插件,而不使用VML。话说好像还需要purchase呢

    canvas后备

    <canvas id="drawingCanvas" width="500" height="300">

        <p>你的浏览器不支持Canvas元素</p>

        <img src="noSupport.jpg"></img>

    </canvas>

    • 标签:
    • 颜色
    • 图片
    • 线段
    • 起点
    • 画图
    • 状态
    • 鼠标
    • 起点鼠标
    • 画图鼠标
    • 坐标系
    • 方法
    • 注释
    • 透明度
    • 页面
    • 浏览器
    • 曲线
    • 函数
    • 直线
  • 加入的知识群:
    学习元评论 (0条)

    评论为空
    聪明如你,不妨在这 发表你的看法与心得 ~



    登录之后可以发表学习元评论
      
暂无内容~~
顶部