html学习_canvas

html学习_canvas

基本功能

  • 获取document对象 var canvas = document.getElementById("homework");

  • 这个是在script代码外面定义的…

  • 获取画布的上下文对象var context = canvas.getContext("2d");

  • 调整参数

    • moveTo(x,y)调整绘图游标

    • lineTo(x,y)画一条线段到(x,y)

    • 线的属性:

      strokeStyle //颜色:"F00","FF0000","rgb(255,0,0,1)",red
      lineWidth   //宽度,单位是像素
      lineCap       //线段端点样式 "butt","round","square"
      lineJoin  //拐弯样式 "miter","round","bevel"
      lineDash()    //线型[实,虚]
    • 文本属性

      font  //(粗细)(倾斜)字体和大小 "30px 宋体"
      font  //粗细(第一个变量) "lighter 30px 宋体" "normal" "bold" "bolder" 
      font  //倾斜 "normal" "italic" "oblique"
      textAlign //对齐方式 "start" "end" "left" "right" "center"
      textBaseline//下划线位置"alphabetic""top""bottom""middle""hanging""ideographic"
      measureText(Text)//测量文本宽度

  • stroke()描边或者fill()填充

    • javascript
      fillStyle

  • <!DOCTYPE HTML>
    <HTML> <head> <title>canvas</title> </head> <body> <canvas id="homework" width="200" height = "200" style="border:solid 1px #CCC;"></canvas> <script type="text/javascript"> var canvas = document.getElementById("homework"); var context = canvas.getContext("2d"); //画一个封闭图形并填充 function close() { context.beginPath();//预备工作 context.moveTo(10, 10); context.lineTo(180, 90); context.lineTo(20, 80); context.closePath();//封闭 context.fillStyle="red"; context.fill();//可加参数 } //写字... function writing(words) { //(text,x,y,maxWidth) context.font = "30px Arial"; context.fillText(words , 10, 75);//填充 context.strokeText(words, 10, 150);//描边 } ////矩形(x,y,width,height) function rect() { context.rect(20,20,150,80); context.stroke(); context.strokeRect(20, 20, 60, 80); context.fillRect(30, 30, 150, 100); context.clearRect(50, 50, 80, 50)//擦除矩形 } //圆弧 function Arc(){ var pi = Math.PI; var degToRad = pi/180; //arc(x,y,radius,startAngle,endAngle,antiClockwise); context.arc(100,70,50,0,90*degToRad,true); context.fill(); } </script> </body> </HTML> 

高级功能

  • 绘制图像

    context.drawImage(image, dx, dy, dw, dh)
    
    context.drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,dx,dy,dw,dh);
    
    var image = new Image();
    image.src = "http://211.66.128.178/picSrc/课本图片/鱼.png";//可能要用英文名
    image.onload = function(){
        context.drawImage(image,50,50);
    }
  • 像素操作

    • 每一个像素对象保持1.长2.宽3.RGB+透明度
    var imageData = context.createImageData(100, 100);     //创造对象(宽,高)(图)
    
    context.drawImage(image, 10, 10);
    var imageData = context.getImageData(10, 10, 201, 146);//取得对象(x,y,宽,高)
    
    for (var i = 0; i < 201 * 146 * 4; i += 4) {
      imageData.data[i] = 255 - imageData.data[i];
      imageData.data[i + 1] = 255 - imageData.data[i + 1];
      imageData.data[i + 2] = 255 - imageData.data[i + 2];       
    }
    
    context.putImageData(imageData, 230, 10);//在画布上面画出来(宽,高)
  • 变换

    • 平移

      context.translate(x, y);//平移距离

      context.transform(1, 0, 0, 1, x, y);

    • 旋转

    context.rotate(angle);//旋转角度

    context.transform(cos30, sin30, -sin30, cos30, 1, 1);

    //以矩形中心旋转
        context.strokeRect(50, 50, 150, 100);
        var degToRad = Math.PI / 180;
        context.translate(125, 100);  //画布移到矩形中心
        context.rotate(45 * degToRad);//旋转
        context.translate(-125, -100);//移回去
        context.strokeRect(50, 50, 150, 100);
    • 缩放:传入负数,翻转画布

context.scale(x, y)//向着原点收缩或放大

context.transform(0.5, 0, 0, 0.5, 1, 1);

  • 填充

    • 线性渐变
    //(x0,y0,x1,y1)
    
    var gradient = context.createLinearGradient(50, 0, 350, 0);
                //breakPoint
    
    gradient.addColorStop(0, "#FF0000");
    gradient.addColorStop(0.5, "#00FF00");
    gradient.addColorStop(1, "#0000FF");
    
    context.fillStyle = gradient;
    context.fillRect(10, 10, 380, 180);//绘制矩形不一定要相同
    • 径向渐变
    context.createRadialGradient(x0, y0, r0, x1, y1, r1)
    //这个方法接收六个参数,前三个参数代表第一个圆的圆心位置和半径,后三个参数代表第二个园的圆心位置和半径。
    
    var gradient = context.createRadialGradient(200, 100, 10, 200, 100, 200);
        gradient.addColorStop(0, "#FF0000");
        gradient.addColorStop(0.5, "#00FF00");
        gradient.addColorStop(1, "#0000FF");
        context.fillStyle = gradient;
        context.fillRect(10, 10, 380, 180);
    • 图像填充
    context.createPattern(image, repetition)
    //这个方法接收两个参数,第一个参数image代表用于填充的图像,第二个参数repetition代表填充的方式,有值“repeat”(重复平铺)、“repeat-x”(仅水平重复)、“repeat-y”(仅纵向重复)和“no-repeat”(不重复)。
    
    image.onload = function () {      
      var pattern = context.createPattern(image, "repeat");     
      context.fillStyle = pattern;      
      context.fillRect(10, 10, 380, 180);
    }

  • 阴影效果

    • image.onload = function () {      
      context.shadowColor = "red";  //阴影颜色 
      context.shadowOffsetX = 5;    //偏移量
      context.shadowOffsetY = 10;
      
      context.shadowBlur = 10;      //模糊程度
      
      context.fillStyle = "blue";
      context.fillRect(10, 10, 180, 100);
      context.drawImage(image, 200, 10);  
      }
  • 剪切

    • clip()方法会把当前已确定的路径包围的区域当做为剪切区域,调用后只有剪切区域内的图形才会绘制出来。如果希望恢复原状,只需把剪切区域设置为画布大小的矩形即可。如下:

    context.clip()

  • 绘图状态

    //save()方法可以让在修改属性之前保存下当前的属性值,在修改结束后想要回到原来的状态时,只需要调用restore()方法即可回到上次调用save()时的状态。堆栈实现
    //清除路径的方法是调用beginPath()方法。
    context.save();
      context.shadowColor = "red";
      context.shadowOffsetX = 5;
      context.shadowOffsetY = 10;
      context.shadowBlur = 10;
      context.fillStyle = "blue";
      context.fillRect(10, 10, 180, 100);
    
    context.restore();
      context.fillRect(210, 10, 180, 100);
    

  • 合成

    context.globalCompositeOperation = "destination-over"

你可能感兴趣的:(html,canvas,2d)