欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

画布canvas的使用2

程序员文章站 2022-04-25 19:57:16
...

画布Canvas--2

示例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.在画布中画一个圆
画布canvas的使用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>

实现效果

画布canvas的使用2

结构分析

涉及对象
画布
涉及函数
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.更改背景
画布canvas的使用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告一段落。以后分析都采用代码 、实现效果 、结构分析 、代码块分析的模式。

上一篇： Java 垃圾回收机制详解及实例代码

下一篇： Nginx+Keepalived实现站点高可用 keepalived配置 keepalived redis linux keepalive

推荐阅读