html5 canvas实训报告_第1页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、html5 canvas实训报告最近在学习html5 canvas，这里记录一些基础办法的总结：html5中的canvas元素是作为2d渲染上下文的包装器，它包含绘图的图形操作所需要的所有办法和功能。· 拜访2d渲染上下文：var canvas = $（&39;canvas&39;）;var context = canvas.get（0）。getcontext（"2d"）;· 绘制矩形并填充色彩：context.fillstyle = "rgb（255, 0, 0）&quo

2、t;该办法设置填充的色彩，赋值可以是任何有效的css色彩值；context.fillrect（0, 0, 100, 100）;该办法接收四个参数：前两个参数是原点（左上角）的（x，y）坐标值，后两个参数是矩形的宽度和高度；· 绘制矩形边框：context.strokerect（0, 0, 100, 100）;参数设置与fillrect（）办法一样；· 绘制线条：context.beginpath（）; ? ?/开头路径context.moveto（10, 10）; ? ?/设置路径原点context.lineto（100, 10）; ? ?/设置路径

3、尽头context.closepath（）; ? ?/结束路径context.stroke（）; ? ?/绘制路径轮廓· 绘制圆形：context.beginpath（）; ? ?/开头路径context.arc（100, 100, 50, 0, math.pi*2, false）;context.closepath（）; ? ?/结束路径context.fill（）; ? ?/填充路径该办法接收六个参数：前两个为原点坐标，第三个参数为半径大小，第四个参数为开头角度，第五个参数为结束角度，第六个参数为绘制方向（逆时针为true，顺时针为false）；&middot

4、; 清除canvas：context.clearrect（0, 0, 100, 100）;该办法参数设置和fillrect相同，表示擦除的矩形区域；· 保存绘图状态：context.save（）;· 复原绘图状态：context.restore（）;· 平移：context.translate（100, 100）;该办法接收两个参数，为平移坐标，表示把2d渲染上下文的原点移动多远（即加上原点的坐标）；· 缩放：context.scale（2, 2）;该办法接收两个参数，分离为x，y方向的缩放倍数；· 旋转：c

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论