zoukankan      html  css  js  c++  java
  • 绘制矩形

      示例1、绘制一个矩形

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.strokeStyle="#0000ff";
    ctx.strokeRect(20,20,150,100);

    示例二、绘制渐变矩形

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    var gradient=ctx.createLinearGradient(0,0,170,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    
    // 用渐变进行填充
    ctx.strokeStyle=gradient;
    ctx.lineWidth=5;
    ctx.strokeRect(20,20,150,100);

    示例三、渐变笔触来写文本

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.font="30px Verdana";
    
    // 创建渐变
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    
    // 用渐变进行填充
    ctx.strokeStyle=gradient;
    ctx.strokeText("Big smile!",10,50);

     

    示例四、在画布上写文本 "Hello world!" 和 "w3school.com.cn",渐变文字比较,:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.font="20px Georgia";
    ctx.strokeText("Hello World!",10,50);
    
    ctx.font="30px Verdana";
    // 创建渐变
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    // 用渐变填色
    ctx.strokeStyle=gradient;
    ctx.strokeText("w3school.com.cn",10,90);

     

    strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式

    context.strokeStyle = color|gradient|pattern;

    strokeText 语法:

    context.strokeText(text,x,y,maxWidth);

       text 规定在画布上输出的文本

       x 开始绘制文本的 x 坐标位置 (相对于画布)

       y 开始绘制文本的 y 坐标位置(相对于画布)

       maxWidth 允许的最大文本宽度,以像素计

    未完,待续......
  • 相关阅读:
    字符串转XML保存后保证XML的格式
    SmartFoxServer学习(3)--第一个Extension
    SmartFoxServer学习(2)--Extension调试
    SmartFoxServer学习(1)--初步了解
    jmeter 开发自己的java请求 二次开发
    hive 面试题
    美丽说-爬虫记录
    python中re.sub的使用 --解读一段代码
    python 抓取美丽说店铺的宝贝图片及详细信息的实现(爬虫)
    hadoop编码问题,mapreduce中Tex与string的转化 乱码问题
  • 原文地址:https://www.cnblogs.com/zhishiyv/p/14446498.html
Copyright © 2011-2022 走看看