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.οnlοad=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);
- }
- //如果你在函数中,没有定义就直接使用变量,就意味你使用的全局变量,
//如果你在函数中, 定义了 才使用该变量,说明使用的局部变量
转载于:https://www.cnblogs.com/lyc2014/p/3600409.html
Html5-canvas相关推荐
- html li 右跟下有倒影,HTML5 canvas实现的下雨夜湖面星空倒影动画特效
HTML5 CANVAS 下雨夜的湖面星空倒影 * { margin: 0; padding: 0; border: 0; background: #000 } canvas { position: ...
- html5 canvas雨点打到窗玻璃动画
html5 canvas雨点打到窗玻璃动画 HTML5下雨效果 效果预览:http://hovertree.com/texiao/html5/4.htm 以下是代码: 1 <!doctype h ...
- HTML5 canvas画图
HTML5 canvas画图 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅 ...
- Html5 Canvas 扫雷 (IE9测试通过)
扫雷是一个非常经典的游戏,记得在第一次接触的windows 3.22 上就有扫雷了,到现在的Win7,依然保留着这个经典的游戏,结合Html5 Canvas,模仿Win7的UI,将老板扫雷进行了升级. ...
- HTML5 Canvas 基础API和实例
开发HTML代码是一件简单的事情,一个文字编辑器,然后一个支持HTML5的浏览器即可(本人的浏览器是Firefox8.0.1).了解HTML的朋友应该知道,HTML5中最让人兴奋的API是canvas ...
- html5 canvas 加载图片
html5 canvas 加载图片 视频 https://www.bilibili.com/video/BV19E411G7Vj?p=30 https://www.bilibili.com/video ...
- html滑动直播,HTML5 canvas实现的静态循环滚动播放弹幕
本文主要介绍了HTML5 canvas实现的静态循环滚动播放弹幕,分享给大家,具体如下: 使用方法和API 语法如下: canvasBarrage(canvas, data); 其中: canvas ...
- 【物联网智能网关-14】Html5:Canvas+WebSocket实现远程实时通信(下)
在上篇博文<Html5:Canvas+WebSocket实现远程实时通信(上)>中已经介绍了当前实现动态网页的一些基本技术,也说明了在.NET micro framework平台下实现We ...
- 如何使用HTML5 Canvas元素来裁剪图像
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动.调整大小和裁剪图像,这些技术适用于图片编辑器.照片分享等应用场景.借助HTML5 Canvas绘图功能,可以在浏览器端以比较简 ...
- html5粒子形成图案,html5 canvas粒子形成下雪背景的效果
本篇文章给大家带来的内容是关于html5 canvas粒子形成下雪背景的效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. canvas粒子形成下雪背景 body{ margin: ...
最新文章
- DB Query Analyzer 中断SQL语句的执行
- CSS3笔记之基础篇(二)颜色和渐变色彩
- 他的前端焦虑:30岁以后的前端路怎么走? 你想过吗~
- 索引sql server_优化SQL Server索引策略
- 资源分享 | ArcGis engine 10.4
- archlinux配置Xfce+fcitx5中文输入法
- 计算机中求声音传输时间公式,混响时间常用的几种计算公式
- 非安装版 Python 安装 PIP
- Xilinx ZYNQ Ultrascale+ 性能测试之 Video Multi Scaler (Linux篇)
- springboot 内存参数 启动
- 费马小定理(详细证明)
- C语言基础课 编写程序之1.编写一个判断素数的函数,并利用该函数输出100~200的所有素数2.编写一个函数fun(),函数功能是:判断一个整数是否既是5又是7的整倍数,若是,输出yes,不是,输出n
- Latex算法命令\REQUIRE和\ENSURE显示为Input:和Output:
- 耳朵后神经疼是怎么回事,耳朵引起的神经疼痛
- 计算机退出安全模式,电脑安全模式的进入与退出的方法
- java轮盘赌_轮盘赌算法
- 关于人工智能不会使大脑变懒惰的议论文_人工智能的好处和风险:所有您需要知道的...
- WLAN驱动分析文档_gzc126_新浪博客
- 坏消息:百度影音、快播关闭P2P服务器!
- Android 四大组件之广播(Broadcast)
热门文章
- Active Diretory 全攻略(六)--文件夹权限与共享(2)
- python的requests模块功能_python-Requests模块的使用
- 随机生成关于银行卡号的字典(卡号以6102009开头,后面依次是001,002,...)
- python生成多个随机数列表_在python中生成1到6之间的6个随机数的列表
- turtle库自动轨迹绘制
- Delphi中使用全局钩子
- SAP License:如何利用DEBUG强力修改表(暴力破解)
- mysql事务、视图
- 【QT】无需写connect代码关联信号和槽函数
- Windows 10 上强制Visual Studio以管理员身份运行