Canvas基础积累

创建canvas

<canvas id="canvas"></canvas>
  • 一般都要存在ID
  • width和height建议直接在<canvas>中直接设定,不要使用css的方式去设定长和高,并且其是没有px单位的,因其也表示精度
  • width和height还可以使用JS的方式进行设定,在Element对象中存在width和height属性,可以进行设定

获取Canvas对象

var canvas=document.getElementById("canvas");
var context= canvas.getContext();

context就是canvas对象,接下来都是对其进行操作

设置width和height

canvas.width = 1024;
canvas.height = 768;

直线

context.strokeStyle="#005588";//设置颜色,red这种方式也是可以的
context.lineWidth=5;//线宽
context.moveTo(100,100);//表示画笔的起点坐标
context.lineTo(700,700);//表示下一笔的坐标
context.lineTo(1000,700);//表示下一笔的坐标
context.stroke();//绘制线条

多边形

context.fillStyle="rgb(2,100,30)";//颜色
context.moveTo(100,100);//表示画笔的起点坐标
context.lineTo(700,700);//表示下一笔的坐标
context.lineTo(1000,700);//表示下一笔的坐标
context.fill();
context.fillStyle="rgb(2,100,30)";//颜色
context.arc( x , y , RADIUS , 0 , 2*Math.PI,false )//画圆,参数依次:横坐标,纵坐标,半径,画圆起点,画圆终点,是否为顺时针方向画圆
context.fill();

fill()会将颜色填充

开始和结束

context.fillStyle="rgb(2,100,30)";//颜色
context.moveTo(100,100);//表示画笔的起点坐标
context.lineTo(700,700);//表示下一笔的坐标
context.lineTo(1000,700);//表示下一笔的坐标
context.fill();
context.strokeStyle="#005588";//设置颜色,red这种方式也是可以的
context.lineWidth=5;//线宽
context.moveTo(100,100);//表示画笔的起点坐标
context.lineTo(700,700);//表示下一笔的坐标
context.lineTo(1000,700);//表示下一笔的坐标
context.stroke();//绘制线条

这代码显示的结果,其实不是我们想的那样,其实还是存在一些问题,因fill()上方的路径状态还是存在有效的,所以为了解决这个问题,引入了beginPath()closePath()

  • beginPath():开始路径,表示画笔状态的开始
  • closePath():结束路径,结束一个路径,如果路径不是封闭的,会将其变为封闭

清除

context.clearRect(0,0,1024, 768);

参数表示清除的坐标范围

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Spring Boot Admin最佳实践

    在Spring Boot Actuator中提供很多像health、metrics等实时监控接口,可以方便我们随时跟踪服务的性能指标。Spring Boot默认...

    迹_Jason
  • Spring Boot启动方式与部署

    Spring Boot为我们提供很多便捷的启动和配置方式。本文就来好好说一下这两方面。

    迹_Jason
  • HBase ACL 实现

    HBase ACL 可以实现不同的用户、Group与Namespace、Table、ColumnFamily层级的数据权限控制

    迹_Jason
  • [HTML5] Canvas绘制简单形状

    使用canvas来进行绘画,它像很多其他dom对象一样,有很多属性和方法,操作这些方法,实现绘画

    陶士涵
  • 06. Web大前端时代之:HTML5+CSS3入门系列~HTML5 画布(上)

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 点击原文,查看笔...

    逸鹏
  • HTML5之Canvas

    document.createElement("canvas").getContext("2d");

    疯狂的技术宅
  • canvas荧光表源码分享

    Youngxj
  • canvas 实现自定义钟表

    参考博客:https://www.cnblogs.com/liugang-vip/p/3557983.html

    acoolgiser
  • HTML5动态时钟

    felix
  • 微信小程序开发实战(17):用画布画一张笑脸

    小程序的画布允许绘制基础的图形,如直线、圆等。画布需要使用<canvas>标签,例如,下面的布局代码使用了<canvas>标签定义了一个300*200的画布。

    蒙娜丽宁

扫码关注云+社区

领取腾讯云代金券