canvas

API
  • 应用程序接口
  • 一个程序提供给另个一程序可以对本程序进行操作
  • 外部接口:如查看天气、汽车违章、菜谱等,URL,对URL进行请求,接口通常返回json数据/xml数据
  • dom、bom是API,nodeJS的模块也是API
canvas
  • 属性
    width height

用css和<canvas width='400' height='300'></canvas>设置的宽高的区别:当下载画布时,显示的宽高是canvas设置的,所以不要用css设置宽高

  • 方法
    getContext
绘制直线
  • 获取画图环境

    var c=document.getElementById('id');
    var cxt=c.getContext('2d')

  • 设置绘图路径
    cxt.moveTo()
    cxt.lineTo()

  • 描边
    cxt.strokeStyle='red'
    cxt.lineWidth='100px'
    cxt.stroke()

  • 填充
    cxt.fill()
    cxt.fillStyle='red'设置填充颜色

    填充到边框宽度的一半

  • 路径的开始和关闭:beiginPath()、closePath()

  • rect(x,y,宽,高),绘制矩形

快速矩形工具

  • rect(x, y, width, height) 绘制矩形路径
  • strokeRect(x, y, width, height) 描边矩形
  • fillRect(x,y,width,height) 填充矩形
  • clearRect(x,y,w,h) 清除矩形 (矩形范围内的内容会被擦除)

圆形(圆弧)

  • arc(x,y,r,start, end, wise) 绘制圆弧
  • start/end是起始位置 单位是 弧度 , 360角度 = 2PI, 180角度 = PI
  • 最后一个参数 顺时针(false)/逆时针(true) 默认false
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 10,185评论 2 32
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 9,355评论 3 40
  • 书中代码示例效果展示:Core HTML5 Canvas Examples 基础知识 canvas元素 canva...
    szu_bee阅读 7,921评论 2 28
  • 下列关于波特率的说法,错误的是() A.波特率用于表征数据传输的速度,波特率越高,数据传输速度越快。 B.波特率为...
    0216_钟羽阅读 2,118评论 3 6
  • 今天一整天都在九寨沟山里,体力消耗很大,感觉是严重透支。高原反应倒是一点都没有,毕竟海拔3000米不到。 九寨沟景...
    在水一方含阅读 2,953评论 1 6