HTML5 绘图图象(上)之:有关canvas元素引领下1代web网

日期:2020-09-17 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

初识canvas元素

HTML5新增了1个元素canvas,用于制图应用,实际上它的主要表现和div较为贴近(实际上他应当属于inline-block),而出示了很多插口,从而随便的绘图矩形框框、园3角形等

PS:有关HTML5新增元素
历经近期两天的学习培训,和之前对HTML5的认知能力,我觉得HTML5实际上還是HTML4,二者之间没多大的差别,不过是提升了点新物品。
我觉得HTML5为大家带来的真实实际意义是:大家能够用javascript做更多的事儿了;大家能够用javascript完成更好的商品了。例如HTML5就处理了大家头疼的跨域难题、即时通讯API、与如今的canvas之因此HTML5叫HTML5,我觉得他是划时期的,例如他让大家用网页页面开发设计手机游戏变为将会;例如他让电脑上桌面上只剩IE不在是传说故事(过度浮夸)
绘图矩形框框

直入正题,大家来绘图1个矩形框框看看,这里出示1个色调挑选器用于便捷的挑选色调,PS:如今无需jquery程序编写觉得真不便。。。

 难题:界定款式与界定height与width

 1来就遇到了难题,我这里先来截个图:

拷贝编码
编码以下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function draw() {
//获得canvas目标
var canvas = document.getElementById('canvas');
if (canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.fillStyle = '#99d9ea';
context.fillRect(0, 0, 300, 200); //填充画布完毕

context.strokeStyle = 'red';
context.fillStyle = 'gray';
context.lineWidth = 1;
context.fillRect(10, 10, 100, 100);
context.strokeRect(10, 10, 100, 100);

context.clearRect(20, 20, 20, 20);
}
</script>
</head>
<body>
<canvas id="canvas" width=300 height="200" style="border: 1px solid black; width: 300px; height: 200px;">
</canvas>


<button onclick="draw();">
绘图矩形框</button>
<input type="color" />
</body>
</html>

  各位状况canvas元素,图1位设定width与height的状况,图210用style特定的状况:

能够看到,针对canvas来讲,還是老老实巴交实界定高宽的好,别去傻乎乎的用款式了,自然这个难题必须具体科学研究才可以得出最后结果。

好了,如今大家再看来看绘图矩形框这个方式:

PS:实际上,应用该方式这么不便,彻底能够将该涵数封裝下下,应用便会简易很多
1、应用getElementById方式获得绘图目标2、获得左右文getContext('2d'),这全是固定不动的写法3、特定填充的色调fillStyle和绘图的色调strokeStyle,即里边的色调和边框的色调4、特定线宽linewidth5、填充/绘图 fillRect/strokeRect 主要参数为 x,y,width,height6、若是要使在其中1块全透明,应用clearRect

至此,绘图矩形框框便临时告1段落。

绘图圆形

如今大家来绘图圆形,这个说起绘图圆形,实际上我原先用js仿佛写过1个,这里也贴出看来看:

拷贝编码
编码以下:

我是纯js画的圆
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div
{
position: absolute;
width: 1px;
height: 1px;
line-height: 1px;
}
</style>
<script src="http://www.cnblogs.com/jquery⑴.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
//x2 + y2 = r2;
$(document).ready(function () {
//先画x,y
var box = $('#box');
var NUM = 200;
var R = NUM / 2;
var RR = R * R;
for (var i = 0; i <= NUM; i = i + 6) {
//var divX = $('<div style="left:' + i + 'px;top:' + R + 'px;">*</div>')
// var divY = $('<div style="top:' + i + 'px;left:' + R + 'px;">*</div>')

var ti = i;
//sqrt(x)
if (ti > R) {
ti = ti - R;
var ty = Math.sqrt((RR - ti * ti));
var y = $('<div style="left:' + (R - ty) + 'px;top:' + i + 'px;">*</div>')
var y1 = $('<div style="left:' + (R + ty) + 'px;top:' + i + 'px;">*</div>')
box.append(y);
box.append(y1);
} else if (ti < R) {
ti = R - ti;
var ty = Math.sqrt((RR - ti * ti));
var y = $('<div style="left:' + (R - ty) + 'px;top:' + i + 'px;">*</div>')
var y1 = $('<div style="left:' + (R + ty) + 'px;top:' + i + 'px;">*</div>')
box.append(y);
box.append(y1);
}
//box.append(divX);
//box.append(divY);
}

for (var i = 0; i <= NUM; i = i + 6) {
//var divX = $('<div style="left:' + i + 'px;top:' + R + 'px;">*</div>')
// var divY = $('<div style="top:' + i + 'px;left:' + R + 'px;">*</div>')
var ti = i;
//sqrt(x)
if (ti > R) {
ti = ti - R;
var ty = Math.sqrt((RR - ti * ti));
var y = $('<div style="top:' + (R - ty) + 'px;left:' + i + 'px;">*</div>')
var y1 = $('<div style="top:' + (R + ty) + 'px;left:' + i + 'px;">*</div>')
box.append(y);
box.append(y1);
} else if (ti < R) {
ti = R - ti;
var ty = Math.sqrt((RR - ti * ti));
var y = $('<div style="top:' + (R - ty) + 'px;left:' + i + 'px;">*</div>')
var y1 = $('<div style="top:' + (R + ty) + 'px;left:' + i + 'px;">*</div>')
box.append(y);
box.append(y1);
}
}
});

</script>
</head>
<body>
<div id="box" style="width: 504px; height: 504px; position: relative; top: 20px;
left: 300px; border: 0px solid black;">
</div>
</body>
</html>

话说,他還是较为圆的说。。。

进到正题

说起画圆、正弦图等毫无疑问会历经1定测算的,因此稍稍繁杂点:

① 建立相对路径

② 建立图型相对路径

③ 相对路径建立进行后关掉相对路径

④ 设置绘图款式启用方式绘图之

拷贝编码
编码以下:

我是1个圆
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function draw() {
//获得canvas目标
var canvas = document.getElementById('canvas');
if (canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.fillStyle = '#99d9ea';
context.fillRect(0, 0, 300, 200); //填充画布完毕
for (var i = 0; i < 5; i++) {
context.beginPath();
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.strokeStyle = 'red';
context.fill();
}
}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="200" >
</canvas>

<button onclick="draw();">
绘图圆</button>
<input type="color" />
</body>
</html>

大家看来看绘图圆全过程中其它地区都沒有难题,可是建立圆相对路径这块值得考虑到:

arc方式主要参数许多,先后是:xy半径刚开始弧度(大家1般喜爱角度,因此要变换)完毕弧度顺时针或逆时针true为顺时针
其它都好说,关键这个刚开始角度和完毕角度大家来科学研究下,由于刚开始我没搞懂,但后来我发现他实际上很简易了。。。便是刚开始的角度和完毕的角度嘛,和大家高初中的专业知识1样的,只但是企业换算Math.PI/180为1度。。。。
总之還是没说清晰,对了,记得大家高中画圆的除圆规和1个计量3角形角度的半圆直尺了吗,我要说的角度便是那个。。。太坑爹了!
仿佛最右侧是0度,竖直是90度,水平是180度,既然这般,大家再看来看

拷贝编码
编码以下:

正时针逆时针
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function draw() {
//获得canvas目标
var canvas = document.getElementById('canvas');
if (canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.fillStyle = '#99d9ea';
context.fillRect(0, 0, 400, 300); //填充画布完毕

context.beginPath();
context.arc(80, 80, 50, 0, 180 * Math.PI / 180, true);
context.closePath();
context.fillStyle = 'gray';
context.fill();

context.beginPath();
context.arc(180, 180, 50, 0, 180 * Math.PI / 180, false);
context.closePath();
context.fillStyle = 'gray';
context.fill();


}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">
</canvas>

<button onclick="draw();">
绘图圆</button>
<input type="color" />
</body>
</html>

大家发现正时针与逆时针還是有一定的不一样的,

 context.arc(180, 180, 50, 90 * Math.PI / 180, 290 * Math.PI / 180, true);

谅解我这里竟然思索了半个小时,我乃至检索了高中的材料。。。。

因而我仿佛搞清楚了点甚么。。。。。。

moveTo与lineTo

现上试验結果:

拷贝编码
编码以下:

两次moveto
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function draw() {
//获得canvas目标
var canvas = document.getElementById('canvas');
if (canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.fillStyle = '#99d9ea';
context.fillRect(0, 0, 300, 200); //填充画布完毕

context.beginPath();
context.fillStyle = 'gray';
context.strokeStyle = 'black';

context.moveTo(10, 10);
context.lineTo(150, 150);

context.moveTo(10, 10);
context.lineTo(10, 150);

context.closePath();
context.fill();
context.stroke();

}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="200">
</canvas>

<button onclick="draw();">
绘图</button>
<input type="color" />
</body>
</html>


拷贝编码
编码以下:

1次moveto
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function draw() {
//获得canvas目标
var canvas = document.getElementById('canvas');
if (canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.fillStyle = '#99d9ea';
context.fillRect(0, 0, 300, 200); //填充画布完毕

context.beginPath();
context.fillStyle = 'gray';
context.strokeStyle = 'black';

context.moveTo(10, 10);
context.lineTo(150, 150);

// context.moveTo(10, 10);
context.lineTo(10, 150);

context.closePath();
context.fill();
context.stroke();

}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="200">
</canvas>

<button onclick="draw();">
绘图</button>
<input type="color" />
</body>
</html>


拷贝编码
编码以下:

3次moveto
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function draw() {
//获得canvas目标
var canvas = document.getElementById('canvas');
if (canvas == null) {
return false;
}
var context = canvas.getContext('2d');
context.fillStyle = '#99d9ea';
context.fillRect(0, 0, 300, 200); //填充画布完毕

context.beginPath();
context.fillStyle = 'gray';
context.strokeStyle = 'black';

context.moveTo(10, 10);
context.lineTo(150, 150);

context.moveTo(10, 10);
context.lineTo(10, 150);

context.moveTo(10, 150);
context.lineTo(150, 150);

context.closePath();
context.fill();
context.stroke();

}
</script>
</head>
<body>
<canvas id="canvas" width="300" height="200">
</canvas>

<button onclick="draw();">
绘图</button>
<input type="color" />
</body>
</html>

以上编码基本上1样,可是他造成的結果却不一样:

我觉得,应用moveto后非常于新开1起始点,以前的1笔勾销,若是只应用lineto的话,他会将几个点连成线,若是能够构成图型便会有着正中间颜色