canvas中常见的几种图形画法

今天给大家分享几种canvas中常见的图形画法。
//圆形
context.beginPath();//新建图层
context.fillStyle = "red";//填充颜色
context.arc(50,50,50,0,Math.PI*2);//四个值依次是圆心坐标,半径,起始点和终点的坐标,true/false,顺时针/逆时针
context.fill();//圆形需要填充

    //矩形
    context.beginPath();//新建图层
    context.strokeStyle = "red";//边框的颜色
    context.lineWidth = 2;//边框的宽度
    context.strokeRect(100,0,100,100);//�四个值依次是起点坐标,宽度,高度
    
    //三角形
    context.beginPath();//新建图层
    context.moveTo(100,0);//起始点
    context.lineTo(100,100);//下一个点的坐标
    context.lineTo(200,100);//下一个点的坐标
    context.closePath();//关闭路径,就会形成一个三角形
    context.stroke();//渲染
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,718评论 2 32
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,963评论 3 40
  • 一、基础介绍和画直线 大多数现代浏览器都是支持Canvas的,比如 Firefox, safari, chrome...
    空谷悠阅读 857评论 0 1
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 1,557评论 0 4
  • 先上效果图: 设计模式:MVVM V层: 经效果图,初步设计的容器视图:列表视图、头视图、月份切换按钮、筛选按钮、...
    longer冯阅读 662评论 0 51