zoukankan      html  css  js  c++  java
  • HTML5 Canvas 绘图

    首先要注意: <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Explorer 9.

    需要先获得2D渲染上下文才能绘制<canvas>元素

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    Canvas是基于状态绘制图像的。

    基本使用:
    1.使用下面两个方法就可以定义一个路径

    context.moveTo(x,y); //起点
    context.lineTo(x,y); //连线到终点

    2.对于多个路径,如果想要分开处理,需要在路径定义的首尾加上下面两个方法,把他们分隔开

    context.beginPath();
    context.closePath();

    3.路径样式

    context.lineWidth    //定义线条宽度
    context.strokeStyle    //定义线条颜色
    context.fillStyle    //填充颜色
    
    context.stroke();    //绘制线条
    context.fill();        //绘制填充的颜色块

    4.绘制弧线

    context.arc(
        centerx, centery, radius,    //圆心坐标(x,y)以及半径r
        startingAngle, endingAngle,    //开始的弧度值,和结束的弧度值
        anticlockwise = false        //可选参数,(false顺时针绘制)还是(true逆时针绘制)
    )

    5.绘制矩形

    context.rect(x, y, width, height); //设置矩形状态
    context.fill();
    context.stroke();
    //或者
    context.fillRect(x, y, width, height); //绘制填充的矩形
    context.strokeRect(x, y, width, height); //绘制边框的矩形

    6.fillStyle、strokeStyle的属性值的格式

    #FFF
    #333
    rgb(255,128,0)
    rgba(100,100,100,0.8)
    hsl(20,62%,28%)
    hsla(40,83%,33%,0.6)
    red

    7.线条的帽子:lineCap
    用于设置线条两端的形状,有以下三种值:

    butt(default)    //默认缺省
    round    //圆头
    square    //方头
    
    context.lineCap = "round";

    8.线条与线条相交的形态:lineJoin
       三种属性值:

    miter(default)    //尖角
    bevel    //斜接
    round    //圆角
    
    context.lineJoin = "round";
    //当尖角很尖锐时,会出现lineJoin为bevel
    //此时跟另外一个属性有关:miterLimit,默认值是10
    //当在lineJoin为miter情况下,miterLimit大于10时,lineJoin会自动变成bevel

    9.图像变换和状态保存
    图像变换:

    位移:translate(x,y);
    旋转:rotate(deg);
    缩放:scale(sx,sy);
    
    //保存当前图形状态:
    context.save();
    //恢复图形的所有状态:
    context.restore();
    //使用:
    context.save();
    context.translate(x,y);
    context.restore();

    10.变换矩阵

    a    c    e
    b    d    f
    0    0    1
    a水平缩放(1)
    b水平倾斜(0)
    c垂直倾斜(0)
    d垂直缩放(1)
    e水平位移(0)
    f垂直位移(0)
    即:默认时,该变换矩阵为单位阵
    
    //设置变换矩阵
    transform(a,b,c,d,e,f);
    //重置变换矩阵
    setTransform(a,b,c,d,e,f);

    11.线性渐变

    var grd = context.createLinearGradient(xstart,ystart,xend,yend);//开始坐标到结束坐标
    grd.addColorStop(stop,color);//stop为浮点数,开始坐标点到结束坐标点直线上,某个位置(0.0~1.0之间)
    //例:
    var skyStyle = context.createLinearGradient(0,0,800,800);
    skyStyle.addColorStop(0.0, 'black');
    skyStyle.addColorStop(1.0, 'blue');
    
    context.fillStyle = skyStyle;

    12.径向渐变

    var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);//开始圆心坐标到结束圆心坐标,以及半径
    grd.addColorStop(stop,color);//stop为浮点数,开始坐标点到结束坐标点直线上,某个位置(0.0~1.0之间)

    13.图片填充

    createPattern(img,repeat-style) //img为图片对象,repeat-style填充格式
    //其中repeat-style: no-repeat/repeat-x/repeat-y/repeat
    //例:
    var backgroundImage = new Image();
    backgroundImage.src = "bg.jpg";
    backgroundImage.onload = function(){
    var pattern = context.createPattern(backgroundImage,"repeat");
    context.fillStyle = pattern;
    context.fillRect(0,0,800,800);
    }

    14.canvas填充

    createPattern(canvas,repeat-style) //canvas对象,repeat-style填充格式

    例:

        window.onload=function(){
            var canvas=document.getElementById("canvas");
            canvas.width=800;
            canvas.height=800;
            var context=canvas.getContext("2d");
            var backCanvas=createBackgroundCanvas();
            var pattern=context.createPattern(backCanvas,"repeat");
            context.fillStyle=pattern;
            context.fillRect(0,0,800,800);
       }
        function createBackgroundCanvas(){
            var backCanvas=document.createElement("canvas");
            backCanvas.width=100;
            backCanvas.height=100;
            var backContext=backCanvas.getContext("2d");
            backContext.beginPath();
            backContext.moveTo(15,15);
            backContext.lineTo(50,50);
            backContext.lineWidth=10;
            backContext.strokeStyle="green";
            backContext.stroke();
            return backCanvas;
        }

    15.video填充

    createPattern(video,repeat-style) //video视频对象

    16.另一种弧线绘制方法

    context.arcTo(
        x1,y1,x2,y2,    //x1,y1,x2,y2两个坐标与起始点x0,y0组成一个角
        radius    //半径
    )

    例:

    context.moveTo(x0,y0);
    context.arcTo(x1,y1,x2,y2,R);
    //起始点为(x0,y0),该弧线与01线以及12线相切

    17.贝塞尔曲线
    贝塞尔二次曲线

    context.moveTo(x0, y0);    //起始点
    context.quadraticCurveTo(
        x1, y1,    //控制点坐标
        x2, y2    //终点坐标
    )

    参考:http://tinyurl.com/html5quadratic

    贝塞尔三次曲线

    context.moveTo(x0, y0);    //起始点
    context.bezierCurveTo(
        x1, y1, //控制点坐标
        x2, y2, //控制点坐标
        x3, y3  //终点坐标
    )

    参考:http://tinyurl.com/html5bezier

    18.文字渲染

    context.font = "font-style font-variant font-weight font-size font-family";    //css字体样式,默认值:"20px sans-serif"
    context.fillText(String, x, y, [maxlen]);    //String字符串,和坐标位置,第四个为可选参数,这行文字的最长宽度
    context.strokeText(String, x, y, [maxlen]);    
    
    font-style: normal    (Default)
                italics   (斜体字)
                oblique   (倾斜字体)
    
    font-variant: normal  (Default)
                  small-caps    (小写英文字母变成小的大写字母)
    
    font-weight: normal   (Default)
                 lighter
                 bold
                 bolder
                 100,200,300,400(normal)
                 500,600,700(bold)
                 800,900
    
    font-size:  20px (Default)
                2em
                150%
    
    font-family: 设置多种字体备选,支持@font-face

    文本水平对齐:

    context.textAlign = left
                        right
                        center

    文本垂直对齐:

    context.textBaseline =  top
                            middle
                            bottom
                            alphabetic (Default)
                            ideographic
                            hanging

    文本的度量:

    context.measureText(String).width //获取渲染的字符串的宽度

    19.阴影

    context.shadowColor    //阴影颜色
    context.shadowOffsetX    //阴影的位移值
    context.shadowOffsetY
    context.shadowBlur    //阴影模糊度

    20.全局方法:

    context.globalAlpha = 1 (Default)    //全局透明度,默认不透明
    
    context.globalCompositeOperation = "source-over" (Default) //绘制的图像在重叠的时候的效果,默认是(source-over)后面绘制的图像覆盖前面绘制的图像
    "source-atop"    //后面绘制的图像覆盖前面绘制的图像,但后面的图像只显示重叠部分
    "source-in"    //后面绘制的图像覆盖前面绘制的图像,但只显示重叠部分
    "source-out"    //只显示后绘制的图像,而且重叠部分被切掉
    "destination-over"    //前面绘制的图像覆盖后面绘制的图像
    "destination-atop"    //前面绘制的图像覆盖后面绘制的图像,但前绘制的图像只显示重叠部分
    "destination-in"    //前面绘制的图像覆盖后面绘制的图像,但只显示重叠部分
    "destination-out"    //只显示前绘制的图像,而且重叠部分被切掉
    "lighter"    //重叠部分颜色叠加融合
    "copy"    //只显示后绘制图像
    "xor"    //异或,重叠部分被挖空

    21.剪辑区域
    将当前创建的路径设置为当前剪切路径的方法

    void ctx.clip();
    void ctx.clip(fillRule);
    void ctx.clip(path, fillRule);

    fillRule

    这个算法判断一个点是在路径内还是在路径外。

    path
    需要剪切的 Path2D 路径。

    例:

    ctx.arc(100, 100, 75, 0, Math.PI*2, false);
    ctx.clip();
    ctx.fillRect(0, 0, 100,100);

    22.非零环绕原则
    路径方向
    应用:镂空剪纸效果

    23.canvas交互

    context.clearRect(x,y,width,height) //清空指定的区域
    
    context.isPointInPath(x,y) //点击检测函数,该点是否在当前规划路径内,当检测点包含在当前或指定的路径内,返回 true;否则返回 false
    
    //以下两个是获取鼠标点击在canvas坐标
    var x = event.clientX - canvas.getBoundingClientRect().left;
    var y = event.clientY - canvas.getBoundingClientRect().top;

    24.扩展Canvas的context
    将drawStar方法扩展到context:

    CanvasRenderingContext2D.prototype.drawStar = function(){}

    25.Canvas兼容性
    检测

    <canvas id="canvas">当前浏览器不支持Canvas,请更换浏览器再试</canvas>

    Canvas与IE6、7、8浏览器的兼容性问题

    引入explorecanvas库:

    https://code.google.com/p/explorecanvas/
    <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->

    26.canvas图形库:canvasplus || artisanJS || RGraph

    http://code.google.com/p/canvasplus

    http://artisanjs.com

    http://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph

    27.Canvas 的 API 接口文档:

    https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D

  • 相关阅读:
    86. Partition List
    328. Odd Even Linked List
    19. Remove Nth Node From End of List(移除倒数第N的结点, 快慢指针)
    24. Swap Nodes in Pairs
    2. Add Two Numbers(2个链表相加)
    92. Reverse Linked List II(链表部分反转)
    109. Convert Sorted List to Binary Search Tree
    138. Copy List with Random Pointer
    为Unity的新版ugui的Prefab生成预览图
    ArcEngine生成矩形缓冲区
  • 原文地址:https://www.cnblogs.com/boliang/p/4773206.html
Copyright © 2011-2022 走看看