画布canvas的使用2
画布Canvas--2
- 示例3：创建画布并画圆
- 代码
- 实现效果
- 结构分析
- 代码块分析
- 示例4：创建画布并给它部分填色
- 代码
- 实现效果
- 结构分析
- 代码块分析
- 示例5：创建画布并设置背景图像
- 代码
- 实现效果
- 结构分析
- 代码块分析
- 总结
示例3：创建画布并画圆
代码
<!DOCTYPE HTML>
<html>
<body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your Browser Does Not Support the Canvas Element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();</script>
</body>
</html>实现效果
1.创建一个矩形画布
2.在画布中画一个圆
结构分析
- 涉及对象
- 矩形画布
- 画一个圆
- 涉及函数
- cxt.beginPath();
- cxt.arc(70,18,15,0,Math.PI*2,true);
- cxt.closePath();
- cxt.fill();
- 逻辑步骤
- 1.生成一个画布canvas对象: canvas
- 2.画布自带可以被画的属性: cxt
- 3.创建画布对象后自动执行script内容 : script
代码块分析
1.生成画布对象：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your Browser Does Not Support the Canvas Element.
</canvas>
id,方便之后函数对对象进行操作或者读取对应的信息
2.使用script画一个圆
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);cxt.closePath();cxt.fill();
</script>
生成画布对象后，会自动执行script中的内容，前两个语句是获取操作的目标，后五句开始对目标进行操作：画一个圆后，再对圆内进行颜色填充。
示例4：创建画布并给它部分填色
代码
<!DOCTYPE HTML>
<html>
<body><canvas Id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your Browser Does Not Support the Canvas Element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);</script>
</body>
</html>
实现效果
结构分析
- 涉及对象
- 画布
- 涉及函数
- var grd=cxt.createLinearGradient(0,0,175,50);
- grd.addColorStop(0,"#FF0000");
- grd.addColorStop(1,"#00FF00");
- cxt.fillStyle=grd;
- cxt.fillRect(0,0,175,50);
- 逻辑步骤
- 1.生成一个画布canvas对象: canvas
- 2.画布自带可以被填充颜色的属性 : fill
- 3.创建画布对象后自动执行script内容 : script
代码块分析
1.创建canvas
<canvas Id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your Browser Does Not Support the Canvas Element.
</canvas>
只需要给出id，定义形状。
2.使用script填充颜色
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);
</script>
前两个语句主要是获取操作的对象，以及定义之后用script中的哪些函数对这个对象进行操作。
var grd=cxt.createLinearGradient(0,0,175,50); 和 cxt.fillRect(0,0,175,50); 共同决定了填充的结果，前部分决定渐变的范围，后部分决定填充的范围，如果范围1小于范围2，那么渐变色填充只会发生在范围1中，其余部分变成单一颜色填充。
grd开头的语句主要决定渐变色的颜色，cxt开头的语句定义了填充颜色的操作。
示例5：创建画布并设置背景图像
代码
<!DOCTYPE HTML>
<html>
<body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your Browser Does Not Support the Canvas Element.</canvas><script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image() img.src="/i/eg_flower.png"cxt.drawImage(img,0,0);</script>
</body>
</html>
实现效果
1.创建一个矩形画布
2.更改背景
结构分析
- 涉及对象
- 矩形画布
- 背景图片
- 涉及函数
- var img=new Image()
- img.src="/i/eg_flower.png"
- cxt.drawImage(img,0,0);
- 逻辑步骤
- 1.生成一个画布canvas对象: canvas
- 2.画布自带可以被画的属性: cxt
- 3.创建画布对象后自动执行script内容 : script
代码块分析
1.生成画布对象：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your Browser Does Not Support the Canvas Element.
</canvas>
id,方便之后函数对对象进行操作或者读取对应的信息
2.使用script插入一个背景图片
<script type="text/javascript">var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");var img=new Image() img.src="/i/eg_flower.png"cxt.drawImage(img,0,0);
</script>
生成画布对象后，会自动执行script中的内容，前两个语句是获取操作的目标，后五句开始对目标进行操作：定义一个img变量，注意使用时涉及img变量的语句是否要加分号（判断的标准是?）。最后再使用一个drawImage函数定义图像的位置。
总结
至此，canvas告一段落。以后分析都采用代码 、实现效果 、结构分析 、代码块分析的模式。
画布canvas的使用2相关推荐
- 刮刮乐html5效果擦除,利用HTML5的画布Canvas实现刮刮卡效果
先给大家展示效果: 你玩过刮刮卡么?一不小心可以中奖的那种.今天我给大家分享一个基于HTML5技术实现的刮刮卡效果,在PC上只需按住鼠标,在手机上你只需按住指头,轻轻刮去图层就可以模拟真实的刮奖效果. ...
- HTML5画布(CANVAS)速查简表
>HTML5画布(Canvas)元素 <canvas id="myCanvas" width="500" height="300" ...
- tkinter笔记：画布canvas
1 整体框架 import tkinter as tkwindow = tk.Tk() #创建窗口window.title('my window') #窗口标题window.geometry('500 ...
- html5画布作品,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
- 【Android】自定义View、画布Canvas与画笔Paint
安卓自定义View其实很简单.这个View可以像<[Android]利用Java代码布局,按钮添加点击事件>(点击打开链接)一样,利用Java代码生成一系列的组件.也可以配合画布Canva ...
- Android 画布Canvas之控件连线操作
一.需求: 1.在画布中的控件A长按能进行控件的连接,只有在控件B范围内抬起控件之间的连线才能连接成功: 2.当控件连线成功后,拖动控件AB之间的连线随着控件的拖动随之变化: 3.控件连线在屏幕上随着 ...
- [OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法...
[OHIF-Viewers]医疗数字阅片-医学影像-querySelector() 选择器语法-将画布(canvas)图像保存成本地图片的方法 将画布(canvas)图像保存成本地图片的方法 使用HT ...
- html5好看画布,10个会让你惊叹不已的HTML5画布(CANVAS)技术应用演
下面的这是10个HTML5画布(canvas)技术效果演示一定会让你惊叹不已.当然,也许你也会认为,过去在老式浏览器中用flash技术也能实现这样的效果.但是,下面的这些演示只使用了现代浏览器里自带技 ...
- html画布设计,10个会让你惊叹不已的HTML5画布(canvas)技术应用
随着老式浏览器(IE6)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我们今后的 ...
- 未来技术 html5 app,未来web浏览技术提前体验：10个会让你惊叹不已的HTML5画布(canvas)技术应用演示...
随着老式浏览器(IE6,IE8)的逐渐淘汰,现代浏览器(火狐浏览器,谷歌浏览器,Opera,Safari)走向主流,越来越多的HTML5和CSS3技术开始出现在各种网站上.这些最新的网页技术究竟能给我 ...
最新文章
- ios微信登录不上服务器,iOS微信授权登录
- harmonyos能装app吗,真机运行HarmonyOS应用APP
- leetcode 215.数组中的第K个最大元素
- 数据流程图顶层一层二层_只需三个公式，三阶魔方超简单入门图文教程5：完全复原第二层...
- 妙到巅峰的8个简洁数学证明（文科生都能看懂），隐隐触摸到一丝只属于神的智慧气息……...
- iOS软件开发架构理解
- 搭建高可用的分布式hadoop2.5.2集群 HDFS HA
- python 随机数_Python中的随机数
- Hustoj_liveCD问题总结
- Please either set ERLANG_HOME to point to your Erlang installation or place
- 「原创」如何快速获取银行、联行号的数据？
- 计量笔记(二) | OLS估计量性质
- 南开大学计算机学院博士毕业要求,南京大学博士研究生申请学位科研成果基本要求...
- CANopen协议解读
- 周志华 机器学习初步 线性模型
- 祖国（或以梦为马） 海子
- AM335x启动流程（BootRom- MLO-的Uboot）
- 关于Python控制打印机如何横向打印EXEL
- 六、系统架构 - 高可用架构设计
- NV显卡 终于被我查到了