canvas

作者: 塔库纳玛哈哈 | 来源:发表于2017-09-28 01:04 被阅读0次

    定义

    canvas.getContext('2d');

    paint.fillRect(); 填充矩形;

    paint.strokeRect(); 轮廓矩形;

    paint.lineWidth=1; 线宽

    paint.clearRect(); 清除内容

    绘制三角形

    paint.beginPath();          //开始绘制新路径
    paint.moveTo(10,10);        //设定路径的起始点
    paint.lineTo(50,50);        //设定路径的宽高
    paint.lineTo(40,20);        //设定第二条路径的宽高
    paint.closePath();          //闭合路径
    paint.lineCap='round';      //一条线末端为圆角
    paint.lineCap='square';     //一条线末端增加一个正方形
    paint.lineJoin='round';     //两条线的连接处为圆角
    paint.lineJoin='miter';     //两条线的连接处为默认
    paint.lineJoin='bevel';     //两条线的连接处为切角
    paint.stroke();             //绘制图形
    

    绘制圆

    paint.arc(100,100,100,0,2*Math.PI,false); 顺时针画圆弧

    paint.arc(100,100,100,0,2*Math.PI,true); 逆时针画圆弧

    paint.stroke();

    现行渐变

    径向渐变

    paint.createRadiusGrandient(0,0,,50,canvas.width,canvs.height,100)

    画字体

    paint.font='20px 宋体';

    paint.strokeText();

    paint.fillText();

    paint.txetAlign='left';

    paint.textStyle='red';

    window.requestAnimationFrame(); 开启

    与浏览器的刷新频率一样,功能与set interval一样,当浏览器失去焦点(不看浏览器的时候),就不会运行,当再次回到浏览器是,在此运行

    window.cancelAnimationFrame(); 停止

    相关文章

      网友评论

          本文标题:canvas

          本文链接:https://www.haomeiwen.com/subject/ygopextx.html