zoukankan      html  css  js  c++  java
  • Core Canvas–Day1

    绘制

    1.坐标系统:

    canvas的坐标以左上角为原点,如图

    image

    可对canvas的坐标系统进行变换,变换的方式有

    • 平移translate
    • 旋转rotate
    • 缩放scale
    • 创建自定义的变换方式,切变

    2.矩形的绘制

    API:

    • 清除:clearRect(double x , double y, double w,double h); //x,y是坐标位置,w,h是宽高
    • 描边:strokeRect(double x ,double y ,double w ,double h);

              --------strokeStyle,lineWidth,lineJoin,miterLimit

    • 填充:fillRect(double x,double y,double w,double h);

    示例:http://runjs.cn/code/ibcpa7fm

    var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d");
    
    context.font = "14px Microsoft YaHei";
    context.fillText("Click to Erase",200,15)
    
    context.fillStyle = "#bc223d";
    context.fillRect(50,50,100,20);
    
    //context.lineJoin = "round";
    context.lineWidth = 1;
    context.strokeStyle = "green";
    context.strokeRect(50,10,100,20);
    
    canvas.onmousedown = function(){
        context.clearRect(0,0,canvas.width,canvas.height);
    }

    3.渐变色与图案

    3.1渐变色

             canvas支持线性渐变(linear)和放射渐变(radial)

            API

    方法

    描述

    CanvasGradient.createLinearGradient(double x0,double y0,double x1,double y1);

    创建线性渐变;参数表示线性渐变的两个端点.返回CanvasGradient实例,可通过CanvasGradient.addColorStop()方法来向线性渐变增加颜色停止点.

    CanvasGradient.createRadialGradient(double x0,double y0,double r0,double x1,double y1,double r1);

    创建放射渐变.参数表示位于圆锥形变区域两端的圆形.返回CnvasGradient实例.

    示例:http://runjs.cn/code/mdh08l1c

    var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d");
    var gradient = context.createLinearGradient(0,0,canvas.width,0);
    gradient.addColorStop(0,"blue");
    gradient.addColorStop(0.25,"#bc223d");
    gradient.addColorStop(0.5,"#eaeaea");
    gradient.addColorStop(0.75,"#bc223d");
    gradient.addColorStop(1,"blue");
    context.fillStyle = gradient;
    //context.fillRect(0,0,canvas.width,canvas.height);
    context.rect(0,0,canvas.width,canvas.height);
    context.fill();
    //2.放射渐变
    var radialGradient = context.createRadialGradient(canvas.width/2,canvas.height,10,canvas.width/2,0,100);
    radialGradient.addColorStop(0,"rgba(0,0,255,0.5)");
    radialGradient.addColorStop(0.5,"rgba(255,0,255,0.9)");
    radialGradient.addColorStop(1,"#bc223d");
    context.fillStyle = radialGradient;
    context.fillRect(0,0,canvas.width,canvas.height);

    3.2 图案

      先上示例:http://runjs.cn/code/zzipqao3

    API

    方法

    描述

    CanvasPattern createPattern(HTMLImageElement | HTMLCanvasElement | HTMLVideoElement image,DOMString repetition)


    第一个参数为指定的类型图案,第二个参数为如何重复该图案.值为repeat,no-repeat,repeat-x,repeat-y
  • 相关阅读:
    LCS(最长公共子序列)
    如何利用MAXScript代码进行DNA双螺旋结构的创建
    如何在3ds MAX中进行宏脚本MacroScript的编写
    3dsmax:[5]maxscript是干什么的
    Visual MAXScript 工具
    3D MAXScript(1)
    如何写3DMAX的插件
    利用GitHub for Window 来进行项目的上传
    VS中的库
    软件测试作业
  • 原文地址:https://www.cnblogs.com/winyou/p/5488793.html
Copyright © 2011-2022 走看看