canvas

2d上下文

var ctx = document.getElementById('cvs').getContext('2d')

绘制线条

 ctx.beginPath()

ctx.moveTo(x, y) // 起点
ctx.lineTo(x, y)  // 连线点
ctx.lineTo(x, y) // 连线点2
……

ctx.closePath()

添加样式

ctx.fillStyle = 'orangered'; // 填充颜色
ctx.fill(); // 填充

ctx.strokeStyle = 'beige' // 描边颜色
ctx.stroke(); // 描边

画线宽度 ctx.lineWidth = 2px;

矩形绘制

ctx.rect(x, y, w, h);

ctx.fillRect(x, y, w, h);
ctx.strokeRect(x, y, w, h);

圆形绘制

arc(x, y, r, startAngle, endAngle, true/false) // true/false 逆时针/顺时针

贝塞尔曲线

quadraticCurveTo(controlX, controlY, endX, endY) // 二次贝塞尔曲线

bezierCurveTo(cx1, cy1, cx2, cy2, endX, endY) // 三次贝塞尔曲线

绘制文字

ctx.fillText(text, x, y, maxWidth); // 填充绘制
ctx.strokeText(text, x, y, maxWidth); // 描边绘制
  • other
    安卓刷新下拉块的小圆,js实现思路


    Screenshot_2019-02-11-17-40-12-02.png

    利用cavans画圆,下拉距离与圆的圆周长度挂钩

  • other2 图片相关
    jpg有损压缩格式,靠损失图片的质量来减少图片的体积
    gif, png有损压缩格式,靠损失图片的色彩数量减少图片的体积
    ps源文件格式psd
    fw源文件格式png
    支持图片背景透明
    gif, png8, png24, png32
    支持图片本身透明
    png24, png32
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 10,193评论 2 32
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 9,365评论 3 40
  •   HTML5 添加的最受欢迎的功能就是 元素。这个元素负责在页面中设定一个区域,然后就可以通过 JavaScri...
    霜天晓阅读 8,201评论 0 2
  • 你在山的另一面 思念绵延不绝 没关系 还有小河里的水 它们会送来你的消息 船里满载着回忆
    秋叶落尽余生安阅读 1,783评论 0 3
  • 一、学习 1.每天早上听时间管理100讲。 2.读书:每天1小时。4天/7天读完 3.听书:每天1小时。听完《时间...
    天雯地理阅读 1,373评论 0 0

友情链接更多精彩内容