18168733823 在线客服 意见反馈 返回顶部
行业动态 技术分享

Canvas简述及其坐标

2019-12-10 分享

关于Canvas

Canvas 本身是个画布,要画图依靠Js
Canvas 格式需要带上ID,常见格式:<canvas id="" width="" height=""></canvas>

下面带上个实例:

画一个 150 * 75 的矩形

<script>
	var c=document.getElementById("mycanvas");
	/*getContext("2d") 对象是内建的 HTML5 对象*/ [^1]
	var ctx= c.context("2d");
	/*fillStyle属性可以是CSS颜色,渐变,或图案*/ [^2]
	ctx.fillStyle="#FF0000";
	/*fillRect 定义填充方式*/ [^3]
	ctx.fillRect("0,0,150,75");
</script>

canvas坐标

canvas 坐标从左上角(0,0)开始
在canvas上画线,定义两个坐标:
moveTo(0,0):定义线条起始坐标
lineTo(150,70):定义线条结束坐标 最后用stroke()方法绘制线条
下面补充实例

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</scritp>

绘制圆形

语法:arc(x,y,r,start,stop)
始终记得画布左上角的坐标(0,0)

参数说明:

  • 圆心在x轴上的坐标
  • 圆心在y轴上的坐标
  • 半径长度
  • 起始角度,以弧度表示,圆心平行的右端为0度
  • 结束角度,以弧度表示
在线咨询
Copyright © 2019 江苏如斯镁科技有限公司 版权所有 苏ICP备19052370号-3   友情链接: 在线商城 网站地图