122°

HTML5中的canvas画布(基础)

### 简单绘图方法:
1. 新建画布    var canvas = document.querySelector("canvas")
2. 获取画图方法、属性    var ctx = canvas.getContext("2d")
3. 把路径移动到画布中的指定点,不创建线条    ctx.moveTo(0, 100)
4. 添加一个新点,然后在画布中创建从该点到最后指定点的线条    ctx.lineTo(200, 100)
5. 绘制已定义的路径 ctx.stroke()

    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    ctx.moveTo(0, 100);
    ctx.lineTo(200, 100);
    ctx.stroke();
    
    
        closePath()    创建从当前点回到起始点的路径
        
        ctx.beginPath();   开启新的图层
        
        线连接方式:   lineJoin: round | bevel | miter (默认)

        线帽(线两端的结束方式):  lineCap: butt(默认值) | round | square 
    
### 绘制文本
 绘制填充文本
 
        content.fillText(文本的内容,x,y)
  
  绘制镂空文本
  
        content.strokeText();
         
  设置文字大小:
  
         content.font="20px 微软雅黑"
         备注: 该属性设置文字大小,必须按照cssfont属性的方式设置
         
  文字水平对齐方式【文字在圆心点位置的对齐方式】
  
          content.textalign="left | right | center"
  
  文字垂直对齐方式
  
           content.textBaseline="top | middle | bottom | alphabetic(默认)"
  
  文字阴影效果
  
           ctx.shadowColor="red";  设置文字阴影的颜色

         ctx.ShadowOffsetX=值;   设置文字阴影的水平偏移量

         ctx.shadowOffsetY=值;   设置文字阴影的垂直偏移量

         ctx.shadowBlur=值;      设置文字阴影的模糊度

本文由【jellydd】发布于开源中国,原文链接:https://my.oschina.net/u/4143235/blog/3158055

全部评论: 0

    我有话说: