欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的题目

发布时间:2016-11-28  编辑:杨雨个人博客网站   点击:   

初识canvas元素

HTML5新增了一个元素canvas,用于画图行使,着实它的示意和div较量靠近(着实他应该属于inline-block),而提供了很多接口,从而等闲的绘制矩形框、园三角形等

PS:关于HTML5新增元素
颠末最近两天的进修,和早年对HTML5的认知,我以为HTML5其拭魅照旧HTML4,两者之间没多大的区别,无非是增进了点新对象。
我以为HTML5为我们带来的真正意义是:我们可以用javascript做更多的工作了;我们可以用javascript实现更好的产物了。好比HTML5就办理了我们头疼的跨域题目、及时通讯API、与此刻的canvas之以是HTML5叫HTML5,我以为他是划期间的,好比他让我们用网页开拓游戏酿成也许;好比他让电脑桌面只剩IE不在是传说(过于浮夸)
绘制矩形框

直入正题,我们来绘制一个矩形框看看,这里提供一个颜色选择器用于利便的选择颜色,PS:此刻不消jquery编程感受真贫困。。。

 题目:界说样式与界说height与width

 一来就碰着了题目,我这里先来截个图:


代码如下:
<!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元素,图一位配置width与height的环境,图二十用style指定的环境:

HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的标题

可以看到,对付canvas来说,照旧老诚恳实界说高宽的好,别去傻乎乎的用样式了,虽然这个题目必要现实研究才气得出最终结论。

好了,此刻我们再来看看绘制矩形这个要领:

PS:着实,行使该要领这么贫困,完全可以将该函数封装下下,行使便会简朴很多
1、行使getElementById要领获取绘制工具2、取得上下文getContext('2d'),这都是牢靠的写法3、指定添补的颜色fillStyle和绘制的颜色strokeStyle,即内里的颜色和边框的颜色4、指定线宽linewidth5、添补/绘制 fillRect/strokeRect 参数为 x,y,width,height6、如果要使个中一块透明,行使clearRect

至此,绘制矩形框便暂且告一段落。

绘制圆形

此刻我们来绘制圆形,这个提及绘制圆形,着实我原本用js仿佛写过一个,这里也贴出来看看:


代码如下:
我是纯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-1.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>

HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的标题

话说,他照旧较量圆的说。。。

进入正题

提及画圆、正弦图等必定会颠末必然计较的,以是稍稍伟大点:

① 建设路径

② 建设图形路径

③ 路径建设完成后封锁路径

④ 设定绘制样式挪用要领绘制之


代码如下:
我是一个圆
<!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>

HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的标题

我们来看看绘制圆进程中其余处所都没有题目,可是建设圆路径这块值得思量:

arc要领参数许多,依次是:xy半径开始弧度(我们一样平常喜好角度,以是要转换)竣事弧度顺时针可能逆时针true为顺时针
其余都好说,首要这个开始角度和竣事角度我们来研究下,由于开始我没搞懂,但其后我发明他着实很简朴了。。。就是开始的角度和竣事的角度嘛,和我们高中学的常识一样的,只不外单元换算Math.PI/180为一度。。。。
横竖照旧没说清晰,对了,记得我们高中画圆的除了圆规和一个计量三角形角度的半圆直尺了吗,我要说的角度就是谁人。。。太坑爹了!
仿佛最右边是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>

HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的标题

我们发明正时针与逆时针照旧有所差异的,

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

包涵我这里居然思索了半个小时,我乃至搜刮了高中的资料。。。。
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的标题HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的标题

于是我仿佛大白了点什么。。。。。。

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>



代码如下:
一次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>



代码如下:
三次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>

以上代码险些一样,可是他发生的功效却差异:
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的标题

我以为,行使moveto后相等于新开一出发点,之前的一笔勾销,如果只行使lineto的话,他会将几个点连成线,如果可以构成图形便会拥有中间色彩
本文地址:http://itbyc.com/web/html5/13637.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1