Html5-canvas
- Html5-canvas:
- 坐标是x向右,逐步增大,
y坐标向下增大,原点在画布的左上角.长度单位是一个像素;
像素是一个密度单位,而厘米是长度单位,两者无法比较;
Html5的绘图函数:
- 2. function draw(){
- 3. //得到画笔
- 4. var canvas = document.getElementById("mycanvas");
- 5. //得到上下文引用,可以理解为画笔
- 6. var cxi = canvas.getContext("2d");
- 7. //画线
- 8. cxi.moveTo(20,20);
- 9. cxi.lineTo(20,190);
- 10. cxi.lineTo(50,190);
- 11. cxi.stroke();
- 12.
- 13. //开始新路径
- 14. cxi.beginPath();
- 15. cxi.moveTo(80,20);
- 16. cxi.lineTo(80,190);
- 17. cxi.lineTo(150,190);
- 18. //闭合路径,把最后的点和第一个点闭合
- 19. cxi.closePath();
- 20. //cxi.fill();
- 21. cxi.stroke();
- 22.
- 23. //对于矩形可以不用画线
- 24. //strokeRect(x,y,width,height);
- 25. //cxi.strokeRect(160,20,100,200);
- 26. //改变填充颜色
- 27. cxi.fillStyle="#00ff00";
- 28. cxi.fillRect(160,20,100,200);
- 29.
- 30. //画圆形(圆心xy,半径:radius,0开始,2pi结束,顺逆时针)
- 31. //六个参数:arc(x,y,radius,startAngle,endAngle,counterclockwise)
- 32. cxi.beginPath();
- 33. cxi.arc(320,80,50,0,2*Math.PI,true);
- 34. cxi.closePath();
- 35. cxi.fillStyle="#0000ff";
- 36. cxi.fill();
- 37. cxi.stroke();
- 38.
- 39. //画图片
- 40. //创建image对象
- 41. var image=new Image();
- 42. //指定是哪个图
- 43. image.src="data:images/1sw.jpg";
- 44. image.onload=function(){
- 45. cxi.drawImage(image,380,20,640,657);
- 46. }
- 47. //写字
- 48. var text="哇有美女";
- 49. cxi.fillStyle="#ff0000";
- 50. cxi.font="50px 华文彩云";
- cxi.fillText(text,10,400);
- }
- //如果你在函数中,没有定义就直接使用变量,就意味你使用的全局变量,
//如果你在函数中, 定义了 才使用该变量,说明使用的局部变量
Html5-canvas的更多相关文章
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- 赠书:HTML5 Canvas 2d 编程必读的两本经典
赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- html5 canvas常用api总结(一)
1.监听浏览器加载事件. window.addEventListener("load",eventWindowLoaded,false); load事件在html页面加载结束时发生 ...
- HTML5 Canvas绘制转盘抽奖
新项目:完整的Canvas转盘抽奖代码 https://github.com/givebest/GB-canvas-turntable 演示 http://blog.givebest.cn/GB-ca ...
- html5 canvas首屏自适应背景动画循环效果代码
模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...
- 自己写的HTML5 Canvas + Javascript五子棋
看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...
- HTML5 Canvas彩色小球碰撞运动特效
脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效. 效果展示 http://hovertree.com/texiao/html5/39/ ...
- 学习笔记:HTML5 Canvas绘制简单图形
HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
- 基于HTML5 Canvas实现的图片马赛克模糊特效
效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...
随机推荐
- [地图SkyLine二次开发]关于IE内存限制问题(1G)
相信很多人也遇到过同样的问题,地图加载中,IE占用的内存一直增加,到了1G多一些的时候,IE就崩溃了. 在网上查阅了一番,有很多结果,下面归纳一下: a).64bit的IE最多可达到4G的内存,但Sk ...
- C#利用服务器实现客户端之间通信
这两天在学习C#,C#高级编程真的是厚厚的一本书QAQ. 昨天看了一下里面的通信部分(其实还没怎么看),看了网上一些人的博客,自己在他们的博客基础上写了一个通信. 先来讲述下我自己对于整个Socket ...
- Wiki安装
我们推荐使用Mediawiki. MediaWiki是基于php环境的,所以如果需要使用该类wiki,就要先部署php的环境. wiki下载: https://www.mediawiki.org/wi ...
- 【腾讯云的1001种玩法】腾讯云搭建DiscuzX论坛
版权声明:本文由艾可德原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/506828001481866457 来源:腾云阁 h ...
- gdb 常用内容
gdb exegdb exe coregdb -p info m TAB ^関数の先頭 info b ^list the breakpoint set args -a test ^引数設定 show ...
- Android布局整理Relative/Linear
1.RelativeLayout布局 android:layout_centerHorizontal 水平居中 android:layout_centerVertical 垂直居中 android:l ...
- jmeter Transaction Controller学习
测试计划组成:一个计时器(2秒),一个事物控制器,两个http request 在Transaction Controller中不勾选第2个选项就相当于lr中的忽略思考时间 没有勾选第2项的执行结果: ...
- loadrunner关联——对服务器返回的数据选择性提交
在跟进项目的过程中,才体会到自己之前闷头看书再写小小的测试程序验证的学习方式很没有效率,知道动态关联,却也只是会参数化式的动态关联,这种关联是我们预先知道要提交的数据而进行的关联:更高一级的可能就是使 ...
- mybatis入门总结
背景: 最近“大胆地”把原本一个通过简单的JDBC连接数据库进行修改和查找操作的小项目改成用mybatis了.. 周四得到任务,周一要完成的,说是要添加查询条件和添加查询字段,修改的字段也多了几个,才 ...
- SQLPlus 在连接时通常有四种方式
1. sqlplus / as sysdba 操作系统认证,不需要数据库服务器启动listener,也不需要数据库服务器处于可用状态.比如我们想要启动数据库就可以用这种方式进入 sqlpl ...