• 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

  • 相关阅读:
    ApiController实现自定义身份认证
    类型参数的约束(C# 编程指南)
    C# 交集、并集、差集
    Winform多线程使用委托操作控件
    ShowWindowAsync系统方法cmdShow参数值含义
    xtraTabbedMdiManager控件切换时控件不更新的问题
    ApiController默认使用Json格式
    css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
    JavaScript 函数大全
    css3动画整理
  • 原文地址:https://www.cnblogs.com/boliang/p/4773206.html
Copyright © 2020-2023  润新知