canvas基础自整理(1)

作者:分分快三计划

展现情况如下:

createLinearGradient(x1,y1,x2,x2卡塔尔(英语:State of Qatar)线性渐变

分分快三计划,3.美术方块:(1卡塔尔 fillRect(L,T,W,H卡塔尔国 //暗中同意颜色是白色

收获图像数据

2.绘制景况: getContext('2d'卡塔尔(英语:State of Qatar) //最近帮衬2d的场景

createRadialGradient(x1,y1,r1,x2,y2,r2卡塔尔径向渐变

 

strokeRect(L,T,W,H卡塔尔(英语:State of Qatar) :带边框的正方

<canvas id="canvas" width="300" height="400" style="background:#fff;">
 不支持canvas标签
</canvas>

isPointInPath

②除去表面css中安装宽高属性的代码,给canvas标签直接抬高宽度和冲天属性:

第意气风发组坐标、第二组坐标、半径

6.绘图路线:

scale

<script>
    canvas.width = 300;
    canvas.height = 500;
</scritp>

shadowBlur

<canvas>
        不支持canvas标签
</canvas>

暗中同意是start跟left相符的效应end right center

1.canvas 标签

X轴偏移、Y轴偏移

分分快三计划 1

文字边框

分分快三计划 2

quadraticCurveTo(dx,dy,x1,y1)

最终显示效果如下:

clearRect(x,y,width,height卡塔尔国 :清除钦点的区块,使该区块完全透明

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <script>
  window.onload=function(){
      var canvas=document.getElementById('canvas').getContext('2d');
      canvas.fillRect(50,50,50,50);
  }
 </script>
 <style>
  body{
      background: #000;
  }
  #canvas{
      width: 300px;
      height: 400px;
      background:#fff;
  }
 </style>
</head>
<body>
 <canvas id="canvas">
  不支持canvas标签
 </canvas>
</body>
</html>    

translate

     (3卡塔尔(英语:State of Qatar) 当使用 fillRect(L,T,W,H卡塔尔(قطر‎ 设置canvas的上涨的幅度和冲天时,只有内嵌css有效,外界css会产出拉伸的事态,比如:

destination-atopsource-indestination-in

 window.onload=function(){
      var canvas=document.getElementById('canvas').getContext('2d');
      canvas.fillStyle='red';  //填充颜色(绘制canvas是有顺序的)
      canvas.lineWidth=10;  //线高度(数值)
      canvas.strokeStyle='blue';//边线颜色

      canvas.lineJoin='round';   //边界连接点样式,属性值:miter(默认),round(圆角),bevel(斜角)

      //  lineCap //端点样式,一条线的两个端点,属性值:butt(默认),round(圆角),square(高度多出为宽一半的值)

      canvas.fillRect(50,50,100,100);
      canvas.strokeRect(50.5,50.5,100,100);
  }

文字填充

window.onload=function(){
        var canvas=document.getElementById('canvas').getContext('2d');
       canvas.fillStyle='red';
           canvas.beginPath();    //开始绘制路径
           canvas.moveTo(100,200);  //移动到绘制路径的新目标点
           canvas.lineTo(100,300);  //新的目标点
           canvas.lineTo(200,300);  //新的目标点
           canvas.closePath();    //结束绘制路径,闭合(起点和终点连接)
       canvas.stroke();      //画线
       
       canvas.beginPath();
       canvas.rect(10,10,100,100);//矩形区域
       canvas.closePath();
       ccanvas.fill();
       canvas.clearRect(10,10,100,100);//清除画布中的矩形区域

       canvas.save();//保存路径
      //相当于函数,写在这中间的代码相当于局部变量,不会影响外部属性值
       canvas.restore();//恢复路径

}

是或不是在点击范围内

     (2卡塔尔 strokeRect(L,T,W,H卡塔尔(英语:State of Qatar)//带边框的方框(暗中认可意气风发像素铁灰边框,但是出于边框初始位置为八个像素点的二分之风姿洒脱 相邻像素点的1/3,所以会呈现2像素,化解办法:top值和left值增添0.5个像素卡塔尔国

font

①在代码js中丰裕设置宽高属性的代码设置宽度和可观:

暗中同意意气风发像素金色边框,突显出来的不一致等原因

该意义与大家预料的不等,那是因为标签中的宽高是画布中的真正宽度和冲天,样式中的宽高档比例缩放,那个时候有三种改进方案:

rotate

7.[ 案例 ]  鼠标画线

shadowOffsetX、shadowOffsetY

window.onload=function(){
         var canvas=document.getElementById('canvas')
           var ctx=canvas.getContext('2d');
           canvas.onmousedown=function(ev){
               var ev= ev || window.event;
                  ctx.moveTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
                  document.onmousemove=function(ev){
                      var ev= ev || window.event;
                      ctx.lineTo(ev.clientX-canvas.offsetLeft,ev.clientY-canvas.offsetTop);
                      ctx.stroke();
                 }
                  document.onmouseup=function(){
                      document.onmousemove=null;
                      document.onmouseup=null;
                  }
            }
}

save:保存路线

 

strokeStyle :边线颜色

canvas.setAttribute("height",canvas.clientHeight);
canvas.setAttribute("width",canvas.clientWidth);

旋转:参数为弧度

     注:(1卡塔尔(英语:State of Qatar)和(2卡塔尔(英语:State of Qatar)顺序区别那么绘制的四方也差异

lineJoin:边界连接点样式

 或

 

globalCompositeOperation属性

 4.安装绘图,边界绘制:

事例:用arc去画个石英钟

jCanvaScript(canvas中的jquery):

模糊半径

变换

事例:旋转的小方块

绘图路线

像素显字

转移新的像素矩阵,起初值是全透明的白色,即(0,0,0,0卡塔尔

黑影颜色

贝塞尔曲线:第生机勃勃组调整点、第二组调整点、第三组截止坐标

设置绘图

drawImage(oImg,x,y,w,h)

fillText(文字,x,y)

canvas制造2d环境:

指标:已经绘制过的图片

-toDataURL("image/png")

lineTo:新的对象点

rect:矩形区域

data:一个数组,包括每一个像素的rgba三个值,注意每一种值都在0~255之间的卡尺头

bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)

butt(暗许卡塔尔(英语:State of Qatar)、round(圆角卡塔尔国、square (中度多出为宽十分之五的值卡塔尔(英语:State of Qatar)

strokeStyle :边线颜色

x ,y:最初地点

属性

measureText(str卡塔尔(قطر‎.width :唯有宽度,未有中度

封装:getXY、setXY

fillRect(x,y,width,height卡塔尔国 :绘制填满的矩形

文字上下的任务的章程暗中同意: alphabetic

渐变

measureText()

缩放例子:旋转加缩放的小方块

小例子:手指画板

绘制圆

arcTo(x1,y1,x2,y2,r)

source-outdestination-outlighter

lineWidth:线宽度,是二个数值

图表预加载:在onload中调用方法

旋转方向:顺时针(暗中同意:false卡塔尔(قطر‎、逆时针(true卡塔尔

安装绘图

像素

arc(x, y,半径,起先弧度,结束弧度,旋转方向卡塔尔(قطر‎

source-overdestination-oversource-atop

strokeText(文字,x,y)

oImg :当前图片x,y :坐标w,h :宽高

分界绘制

取值0-1

源:新的图形

贝塞尔曲线:第少年老成组调控点、第二组截止坐标

fillStyle:填充颜色(绘制canvas是有种种的卡塔尔

textAlign

非得是同源下

舞狮:从起初点为基准点,移动当前坐标地点

获得和装置内定坐标

蒙面合成

beginPath :开端绘制路线

clearRect:删除三个画布的矩形区域

事例:文字居中

textBaseline

设置新的图像数据

文本_2

阴影

图片的像素操作

制图路线_2

fill:填充,默许深黄

制图矩形:

增添图片填充

strokeRect(x,y,width,height卡塔尔(قطر‎ :绘制矩形的边框

fillStyle:填充颜色(绘制canvas是有种种的卡塔尔(قطر‎

事例:天涯论坛的图形旋转效果

文本

lineWidth:线宽度,是二个数值

绘制方块

miter(默认)、round(圆角)、bevel(斜角)

lineCap:端点样式

addColorStop(stop,color);

合成

closePath:甘休绘制路线

像素_2

createPattern(img,repeat)

导出图片

var txt = cvs.grtContext(‘2d’);

restore:恢复生机路线

height :一列的像素个数

getImageData(x,y,w,h)

repeat、repeat-x、repeat-y、no-repeat

等图片加载完,再进行canvas操作

fillRect(L,T,W,H卡塔尔 :默许颜色是蓝灰

putImageData(获取图像,x,y卡塔尔(قطر‎

事件操作

stop取值(0-1)

width:风度翩翩行的像素个数

copyxor

shadowColor

stroke:画线,暗中认可紫蓝

制图其余曲线

安顿图片

弧度与角度的关联:弧度=角度*Math.PI/180

事例:夏洛特克效果

文字大小:'60px impact‘

大局阿尔法值

createImageData(w,h)

moveTo:移动到绘制的新对象点

例子:反色、倒影、渐变等

globalAlpha

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划 日记本