HTML5 繪製圖片(上)：關於canvas元素引領下一代web頁面的問題_html5教學技巧
- WBOY原創
- 2016-05-16 15:49:281309瀏覽
初識canvas元素
繪製長方形框
<br> <script type="text/javascript"> <br /> function draw() { <br /> //取得canvas物件<br /> var canvas = document.getElementById('canvas'); <br /> if (canvas == null) { <br /> return false; <br /> } <br /> var context = canvas.getContext('2d'); <br /> context.fillStyle = '#99d9ea'; <br /> context. fillRect(0, 0, 300, 200); //填滿畫布結束<br /> <br /> context.strokeStyle = 'red'; <br /> context.fillStyle = 'gray'; <br /> context.lineWidth = 1; <br /> context.fillRect(10, 10, 100, 100); <br /> context.strokeRect(10, 10, 100, 100); <br /> <br /> context.clearRect(20, 20, 🎜> context.clearRect(2020, ) ; <br /> } <br /> </script> <br> <br>
我是純js畫的圓
;
')
// var divY = $('
var ti = i;
//sqrt(x)
if (ti >; R) {
ti = ti - R;
var ty = Math.sqrt((RR - ti * ti)) ;
var y = $('
var y1 = $( '
box.append(y);
box.append(y1 );
} else if (ti ti = R - ti;
var ty = Math.sqrt((RR - ti * ti));
var y = $( '
var y1 = $('
box.append(y);
box.append(y1);
}
//box.append(divX );
//box.append(divY);
}
for (var i = 0; i //var divX = $('
// var divY = $( '
var ti = i;
//sqrt(x)
if (ti > R) {
ti = ti - R;
var ty = Math.sqrt((RR - ti * ti));
var y = $('
var y1 = $('
box.append(y);
box.append(y1);
} else if (ti ti = R - ti;
var ty = Math.sqrt((RR - ti * ti));
var y = $('
var y1 = $('
box.append(y);
box.append(y1);
}
}
});
我是一个圆
8b05045a5be5764f313ed5b9168a17e6
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
4ec11beb6c39d0703d1751d203c17053
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 0e9e97c11b7ad23065c4a802a5a57f43
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
c5dcada4e6b6fc9b2b5d5dcbe836517f
c2caaf3fc160dd2513ce82f021917f8b
b39380f543d9051c3b1172b4068c0eff
绘制圆65281c5ac262bf6d81768915a4a77ac0
8f3ab5b05bbbd53dd9f9d9b11096ac5c
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
两次moveto
8b05045a5be5764f313ed5b9168a17e6
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
4ec11beb6c39d0703d1751d203c17053
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();
}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
25d6088b8f9b60334530a76b4b9a66e0
c2caaf3fc160dd2513ce82f021917f8b
b39380f543d9051c3b1172b4068c0eff
绘制65281c5ac262bf6d81768915a4a77ac0
8f3ab5b05bbbd53dd9f9d9b11096ac5c
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
一次moveto
8b05045a5be5764f313ed5b9168a17e6
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
4ec11beb6c39d0703d1751d203c17053
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();
}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
25d6088b8f9b60334530a76b4b9a66e0
c2caaf3fc160dd2513ce82f021917f8b
b39380f543d9051c3b1172b4068c0eff
绘制65281c5ac262bf6d81768915a4a77ac0
8f3ab5b05bbbd53dd9f9d9b11096ac5c
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
三次moveto
8b05045a5be5764f313ed5b9168a17e6
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
4ec11beb6c39d0703d1751d203c17053
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();
}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
25d6088b8f9b60334530a76b4b9a66e0
c2caaf3fc160dd2513ce82f021917f8b
b39380f543d9051c3b1172b4068c0eff
绘制65281c5ac262bf6d81768915a4a77ac0
8f3ab5b05bbbd53dd9f9d9b11096ac5c
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
HTML5新增了一個元素canvas，用於繪圖使用，其實它的表現和div比較接近（其實他應該屬於inline-block），而提供了許多接口，從而輕易的繪製矩形框、園三角形等
PS：關於HTML5新增元素经过最近两天的学习，和以前对HTML5的认知，我认为HTML5其实还是HTML4，两者之间没多大的区别，无非是增加了点新东西。<br />我认为HTML5为我们带来的真正意义是：我们可以用javascript做更多的事情了；我们可以用javascript实现更好的产品了。比如HTML5就解决了我们头疼的跨域问题、实时通信API、与现在的canvas之所以HTML5叫HTML5，我认为他是划时代的，比如他让我们用网页开发游戏变成可能；比如他让电脑桌面只剩IE不在是传说（过于夸张）
直入正題，我們來繪製一個矩形框看看,這裡提供一個顏色選擇器用於方便的選擇顏色，PS：現在不用jquery編程感覺真麻煩。 。 。
問題：定義樣式與定義height與width 一來就遇到了問題，我這裡先來截張圖：
複製程式碼
程式碼如下: 各位情況canvas元素，圖一位設定width與height的情況，圖二十用style指定的情況：
可以看到，對於canvas來說，還是老實定義高寬的好，別去傻乎乎的用樣式了，當然這個問題需要實際研究才能得出最終結論。
好了，現在我們再來看看畫長方形這個方法：
PS：其实，使用该方法这么麻烦，完全可以将该函数封装下下，使用便会简单许多
1、使用getElementById方法获取绘制对象2、取得上下文getContext('2d')，这都是固定的写法3、指定填充的颜色fillStyle和绘制的颜色strokeStyle，即里面的颜色和边框的颜色4、指定线宽linewidth5、填充/绘制 fillRect/strokeRect 参数为 x,y,width,height6、若是要使其中一块透明，使用clearRect
至此，繪製矩形框便暫時告一段落。
繪製圓形
現在我們來繪製圓形，這個說起繪製圓形，其實我原來用js好像寫過一個，這裡也貼出來看看：
複製程式碼
程式碼如下:我是純js畫的圓
// var divY = $('
;*
')var ti = i;
//sqrt(x)
if (ti >; R) {
ti = ti - R;
var ty = Math.sqrt((RR - ti * ti)) ;
var y = $('
*
')var y1 = $( '
*
')box.append(y);
box.append(y1 );
} else if (ti ti = R - ti;
var ty = Math.sqrt((RR - ti * ti));
var y = $( '
*
')var y1 = $('
*
')box.append(y);
box.append(y1);
}
//box.append(divX );
//box.append(divY);
}
for (var i = 0; i //var divX = $('
*
')// var divY = $( '
*
')var ti = i;
//sqrt(x)
if (ti > R) {
ti = ti - R;
var ty = Math.sqrt((RR - ti * ti));
var y = $('
*
')var y1 = $('
*
')box.append(y);
box.append(y1);
} else if (ti ti = R - ti;
var ty = Math.sqrt((RR - ti * ti));
var y = $('
*
')var y1 = $('
*
')box.append(y);
box.append(y1);
}
}
});
說話，他還是比較圓的說。 。 。
進入正題
說起畫圓、正弦圖等一定是要經過一定計算的，所以稍稍複雜點：
①建立路徑
②建立圖形路徑
③路徑建立完成後關閉路徑
我是一个圆
8b05045a5be5764f313ed5b9168a17e6
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
4ec11beb6c39d0703d1751d203c17053
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 0e9e97c11b7ad23065c4a802a5a57f43
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
c5dcada4e6b6fc9b2b5d5dcbe836517f
c2caaf3fc160dd2513ce82f021917f8b
b39380f543d9051c3b1172b4068c0eff
绘制圆65281c5ac262bf6d81768915a4a77ac0
8f3ab5b05bbbd53dd9f9d9b11096ac5c
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
我们来看看绘制圆过程中其它地方都没有问题，但是创建圆路径这块值得考虑：
arc方法参数很多，依次是：xy半径开始弧度（我们一般喜欢角度，所以要转换）结束弧度顺时针或者逆时针true为顺时针<br />其它都好说，主要这个开始角度和结束角度我们来研究下，因为开始我没搞懂，但后来我发现他其实很简单了。。。就是开始的角度和结束的角度嘛，和我们高中学的知识一样的，只不过单位换算Math.PI/180为一度。。。。<br />反正还是没说清楚，对了，记得我们高中画圆的除了圆规和一个计量三角形角度的半圆直尺了吗，我要说的角度就是那个。。。太坑爹了！<br />好像最右边是0度，垂直是90度，水平是180度，既然如此，我们再来看看<br /><br><div class="msgheader"><div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode20'));"><u>复制代码</u></span></div>代码如下:</div><div class="msgborder" id="phpcode20"><br /> 正时针逆时针 <br /> <!DOCTYPE html><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title></title><br /> <script type="text/javascript"><br /> function draw() {<br /> //获取canvas对象<br /> var canvas = document.getElementById('canvas');<br /> if (canvas == null) {<br /> return false;<br /> }<br /> var context = canvas.getContext('2d');<br /> context.fillStyle = '#99d9ea';<br /> context.fillRect(0, 0, 400, 300); //填充画布结束<br /> <br /> context.beginPath();<br /> context.arc(80, 80, 50, 0, 180 * Math.PI / 180, true);<br /> context.closePath();<br /> context.fillStyle = 'gray';<br /> context.fill();<br /> <br /> context.beginPath();<br /> context.arc(180, 180, 50, 0, 180 * Math.PI / 180, false);<br /> context.closePath();<br /> context.fillStyle = 'gray';<br /> context.fill();<br /> <br /> <br /> }<br /> </script><br /> </head><br /> <body><br /> <canvas id="canvas" width="400" height="300"><br /> </canvas><br /> <br /> <button onclick="draw();"><br /> 绘制圆</button><br /> <input type="color" /><br /> </body><br /> </html><br /> </div><br /><p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042416135933.jpg" /></p><p>我们发现正时针与逆时针还是有所不同的，</p><div class="cnblogs_code"><pre class="brush:php;toolbar:false"> context.arc(180, 180, 50, 90 * Math.PI / 180, 290 * Math.PI / 180, true);
原谅我这里居然思考了半个小时，我甚至搜索了高中的资料。。。。
于是我好像明白了点什么。。。。。。
moveTo与lineTo现上实验结果：
复制代码
代码如下:两次moveto
8b05045a5be5764f313ed5b9168a17e6
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
4ec11beb6c39d0703d1751d203c17053
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();
}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
25d6088b8f9b60334530a76b4b9a66e0
c2caaf3fc160dd2513ce82f021917f8b
b39380f543d9051c3b1172b4068c0eff
绘制65281c5ac262bf6d81768915a4a77ac0
8f3ab5b05bbbd53dd9f9d9b11096ac5c
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
复制代码
代码如下:一次moveto
8b05045a5be5764f313ed5b9168a17e6
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
4ec11beb6c39d0703d1751d203c17053
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();
}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
25d6088b8f9b60334530a76b4b9a66e0
c2caaf3fc160dd2513ce82f021917f8b
b39380f543d9051c3b1172b4068c0eff
绘制65281c5ac262bf6d81768915a4a77ac0
8f3ab5b05bbbd53dd9f9d9b11096ac5c
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
复制代码
代码如下:三次moveto
8b05045a5be5764f313ed5b9168a17e6
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f
4ec11beb6c39d0703d1751d203c17053
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();
}
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
25d6088b8f9b60334530a76b4b9a66e0
c2caaf3fc160dd2513ce82f021917f8b
b39380f543d9051c3b1172b4068c0eff
绘制65281c5ac262bf6d81768915a4a77ac0
8f3ab5b05bbbd53dd9f9d9b11096ac5c
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
以上代码几乎一样，但是他产生的结果却不同：
我认为，使用moveto后相当于新开一起点，之前的一笔勾销，若是只使用lineto的话，他会将几个点连成线，若是可以组成图形便会拥有中间色彩
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn