版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
Canvas矩形Canvas矩形在Canvas中绘制矩形可以使用1.绘制线条(lineTo)到指定的像素点形成一个闭合的矩形2.矩形填充(strokeRect)直接绘制出一个矩形框Canvas矩形线条绘制在HTML文件的<body>标签中添加:<canvasid="canvas"></canvas><script>varcan=document.getElementById('canvas');varctx=can.getContext('2d');ctx.moveTo(0,0);ctx.lineTo(100,0);ctx.lineTo(100,50);ctx.lineTo(0,50);ctx.lineTo(0,0);ctx.stroke();</script>通过绘制线条,形成一个闭合的矩形,浏览器效果:Canvas矩形矩形填充效果Canvas矩形<canvasid="canvas"width="600"height="400"></canvas><scripttype="text/javascript">functiondraw(id){varcanvas=document.getElementById(id);varcontext=canvas.getContext('2d');//getContext()方法可返回一个对象context.fillStyle="green";//设置或返回用于填充绘画的颜色、渐变或模式context.fillRect(50,50,100,50);//x轴y轴宽和高,绘制“被填充”的矩形}draw("canvas");</script>浏览器绘制效果:矩形无填充效果Canvas矩形<canvasid="canvas"width="600"height="400"></canvas><scripttype="text/javascript">functiondraw(id){varcanvas=document.getElementById(id);varcontext=canvas.getContext('2d');context.strokeRect(50,50,100,50);}draw("canvas");</script>浏览器绘制效果:设置样式<canvasid="canvas"width="600"height="400"></canvas><scripttype="text/javascript">functiondraw(id){varcanvas=document.getElementById(id);varcontext=canvas.getContext('2d');//getContext()方法可返回一个对象context.strokeStyle="red";//设置颜色context.lineWidth=10;//设置线宽context.strokeRect(50,50,100,50);}draw("canvas");</script>浏览器效果:Canvas矩形绘制多个矩形Canvas矩形<scripttype="text/javascript">functiondraw(id){varcanvas=document.getElementById(id);varcontext=canvas.getContext('2d');//getContext()方法可返回一个对象context.strokeStyle="pink";//图形边框的填充颜色context.lineWidth=5;//用宽度为5像素的线条来绘制矩形:context.strokeRect(50,50,180,120);
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 怀化学院《设计构成》2021-2022学年第一学期期末试卷
- 交通路口监控系统建设方案
- 活动策划复工疫情防控方案
- 餐饮外卖垃圾分类管理方案
- 露天矿 爆破 课程设计
- 科研机构突发事件应急预案制度
- 华中师范大学《音乐教学技能训练》2023-2024学年第一学期期末试卷
- 鲁菜小吃培训课程设计
- Peroxynitrite-sodium-生命科学试剂-MCE
- PBZ1038-生命科学试剂-MCE
- 系统思维与系统决策:系统动力学智慧树知到期末考试答案2024年
- 2024年康养政策项目申请报告范稿
- (正式版)JBT 106-2024 阀门的标志和涂装
- 办公设备(电脑、一体机、投影机等)采购 投标方案(技术方案)
- 反恐防恐知识培训总结与反思
- 2022版义务教育(信息科技)课程标准(附课标解读)
- 2024世界糖尿病日
- “课程思政”调查问卷(教师卷)
- 驻外员工管理制度
- 老旧住宅小区加装电梯施工组织方案
- 小学人教四年级数学四年级(上)平行与垂直
评论
0/150
提交评论