首页 > 代码库 > canvas(一) 基本线条绘制
canvas(一) 基本线条绘制
var dom = document.getElementById(‘canvasItem‘), ctx = dom.getContext(‘2d‘); //坐标位置默认基于 浏览器窗口(0,0),此时居中,基于 当前坐标系 //x轴 向右,y轴向下 ctx.beginPath(); ctx.moveTo(100,350); //只是将坐标移到某点 ctx.lineTo(500,350); //将两个点之间连接起来 ctx.lineTo(500,200); ctx.lineTo(600,350); //基于状态绘制图像 此时,状态设置 ctx.moveTo(600,450); ctx.lineTo(600,500); ctx.lineWidth=10; ctx.strokeStyle=‘red‘; ctx.stroke(); /*绘制不同 属性的 线条,使用beginPath 重新开启一条全新的路径*/ ctx.beginPath(); //ctx.moveTo(100,520); ctx.lineTo(100,520); //使用lineTo 相当于 moveTo,当使用了beginPath ctx.lineTo(600,520); ctx.lineWidth=3; ctx.strokeStyle=‘blue‘; ctx.stroke(); ctx.beginPath(); ctx.moveTo(100,560); ctx.lineTo(600,560); ctx.lineWidth=30; ctx.strokeStyle=‘yellow‘; ctx.stroke(); //绘制
canvas(一) 基本线条绘制
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。