• Canvas(绘画)


    一、Canvas(绘画)

    1.1、创建canvas元素

    <canvas id="canvas" width="800"  height="600">不支持Canvas(当浏览器不支持时会显示出来)</canvas>

    1.2、获取、配置canvas元素

    (1)、获取创建的canvas元素:

    document.getElementById('canvas')

    (2)、canvas元素上面绘制图象:

       ①、首先必须获取canvas环境上下文:canvas.getContext(画布上绘制的类型)

         Ⅰ、2d :表示2维

         Ⅱ、experimental-webgl:表示试验版3维

         Ⅲ、webgl :表示3维

    //获取画布元素
    var canvas=document.getElementById('canvas');
    //绘图的上下文
    var context=canvas.getContext('2d');

    (3)、canvas属性:

      ①、设置canvas宽:context.width=1204;

      ②、设置canvas高:context.heigth=768;

    1.3、画线:

    (1)、方法

    属性说明
    context.moveTo(x,y) 把画笔移动到x,y坐标,建立新的子路径。(起始位置)
    context.lineTo(x,y) 建立上一个点到x,y坐标的直线,如果没有上一个点,则等同于moveTo(x,y),把(x,y)添加到子路径中。(启动/终点)
    context.stroke() 描绘子路径(开始画线)
    context.closePath() 如果当前子路径是打开的,就关闭它。否则把子路径中的最后一个点和路径中的第一个点连接起来,形成闭合回路。
    context.beginPath() 清空子路径,一般用于开始路径的创建。在几次循环地创建路径的过程中,每次开始创建时都要调用beginPath函数。
    context.fill() 执行填充

    (2)、属性:

    context.lineWidth=10           //设置线宽
    context.strokeStyle="blue"     //设置线的颜色
    context.fillStyle="lightgreen" //设置填充颜色   

    1.4、绘制矩形:

    属性说明
    context.strokeRect(x,y,width,height) 以x,y为左上角,绘制宽度为width,高度为height的矩形。
    context.fillRect(x,y,width,height) 以x,y为左上角,填充宽度为width,高度为height的矩形。
    context.clearRect(x,y,width,height) 清除以x,y为左上角,宽度为width,高度为height的矩形区域。

    1.5、绘制圆弧

    context.arc(x,y,radius,startAngle,endAngle,anticlockwise) 

    (1)、arc方法用来绘制一段圆弧路径:

    参数说明
    x,y 圆心位置
    radius 半径
    startAngle 起始弧度
    endAngle 终止弧度来 (Math.PI=180° Math.PI*2=360°【一周】)
    anticlockwise 指定旋转方向:如果为 true 就是逆时针,false 则为顺时针

    1.6、绘制图像:

    属性说明
    context.drawImage(image,x,y) 把image图像绘制到画布上x,y坐标位置。
    context.drawImage(image,x,y,w,h) 把image图像绘制到画布上x,y坐标位置,图像的宽度是w,高度是h。
    context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) 截取image图像以sx,sy为左上角坐标,宽度为sw,高度为sh的一块矩形区域绘制到画布上, 以dx,dy坐标位置,图像宽度是dw,高度是dh。其中image可以是htmlImageElement元素,htmlcanvasElement元素,htmlVideoElement元素

    1.7、绘制文字:

    (1)、函数

    属性说明
    context.fillText(text,x,y,[maxWidth]) 在canvas上填充文字,text是绘制的文字,x,y分别表示绘制在canvas上的横,纵坐标最后一个参数可选,表示显示文字的最大宽度,防止文字显示溢出。
    context.strokeText(text,x,y,[maxWidth]) 在canvas上描边文字,参数的意义同fillText

    (2)、属性:

    说明
    获取画布元素 var canvas=document.getElementById("id");
    绘图的上下文 var context=canvas.getContext(画布上绘制的类型)
    设置线宽 context.lineWidth=10;
    设置线的颜色 context.strokeStyle="blue";
    设置填充颜色 context.fillStyle="lightgreen";
    设置字体 context.font;【例:context.font='italic bolder 48px 黑体';】
    设置旋转坐标原点 context.translate(500,500);
    旋转度数 context.rotate(Math.PI);

    二、WebGL(3D绘图标准)

    1、下载:three.js等

    三、二次贝塞尔曲线及三次贝塞尔曲线:

    1、二次贝塞尔曲线:quadraticCurveTo(cp1x, cp1y, x, y)         【cp1x,cp1y为一个控制点,x,y为结束点。】
    2、三次贝塞尔曲线:bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)【cp1x,cp1y为控制点一,cp2x,cp2y为控制点二,x,y为结束点。】

    四、动画

    context.save(); //保存save以上context对象设置的属性值 context.restore();//恢复到先前保存在context对象上的所有属性值

    实现动画效果的非常重要的API:window.requestAnimationFrame(callback)



  • 相关阅读:
    网络流初步——增广路算法(EK)模板
    求大组合数
    RMQ问题
    欧拉函数
    [LintCode] Minimum Path Sum
    [LintCode] Unique Paths II
    [LintCode] Unique Paths
    [LintCode] Flip Bits
    [LintCode] O(1) Check Power of 2
    [LintCode] Count 1 in Binary
  • 原文地址:https://www.cnblogs.com/huoqin/p/13206992.html
Copyright © 2020-2023  润新知