JS畫線(實(shí)例代碼)
IE下畫線
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
v/:* { behavior:url(#default#VML); }
</style>
</head>
<body>
<v:line
from='200,200'
to='300,100'
style='position:absolute;z-index:8'>
</v:line>
</body>
</html>
<script>
var R =function(){};
R.prototype.createLine = function (startX,startY,endX,endY){
var le = document.createElement( "<v:line><v:line>" );
le.from = startX + ',' + startY ;
le.to = endX + ',' + endY ;
le.strokecolor= "red" ;
le.strokeweight= "1pt" ;
return le;
}
var d =new R();
document.body.appendChild(d.createLine(1,1,200,100));
</script>
FF下畫線
<html>
<head>
<title>A canvas fillRect, strokeRect and clearRect example</title>
<meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/">
<meta name="DC.publisher" content="Mozilla Developer Center, http://developer.mozilla.org">
<script type="text/javascript">
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('tutorial');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,250);
ctx.lineTo(50,250);
ctx.closePath();
ctx.stroke();
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
<style type="text/css">
</style>
</head>
<body onload="drawShape();">
<div>
<canvas id="tutorial" width="400" height="400"></canvas>
</div>
</body>
</html>
相關(guān)文章
JS ListBox的簡單功能實(shí)現(xiàn)代碼
這段時(shí)間在項(xiàng)目組都是做靜態(tài)頁面，都是些復(fù)制粘貼的活，難得碰到個(gè)稍微有點(diǎn)難度的頁面。后來看到這個(gè)頁面還不錯(cuò)，可以自己做做看，雖然公司已經(jīng)有這樣的組件，但不想用，反正沒什么事，就當(dāng)多學(xué)學(xué)JS好了。2008-10-10
js數(shù)組常見操作及數(shù)組與字符串相互轉(zhuǎn)化實(shí)例詳解
這篇文章主要介紹了js數(shù)組常見操作及數(shù)組與字符串相互轉(zhuǎn)化方法,以實(shí)例形式較為詳細(xì)的分析并總結(jié)了JavaScript數(shù)組的常見使用技巧與轉(zhuǎn)化方法,需要的朋友可以參考下2015-11-11
小程序自定義tab-bar踩坑實(shí)戰(zhàn)記錄
這篇文章主要給大家介紹了關(guān)于小程序自定義tab-bar踩坑實(shí)戰(zhàn)的相關(guān)資料,包括下載代碼、放置文件、修改JS文件、配置app.json和隱藏原生導(dǎo)航欄等步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-12-12
基于JavaScript FileReader上傳圖片顯示本地鏈接
這篇文章主要為大家詳細(xì)介紹了基于JavaScript FileReader上傳圖片顯示本地鏈接的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05
微信小程序 連續(xù)旋轉(zhuǎn)動(dòng)畫（this.animation.rotate）詳解
這篇文章主要介紹了微信小程序 連續(xù)旋轉(zhuǎn)動(dòng)畫（this.animation.rotate）詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
JavaScript實(shí)現(xiàn)旋轉(zhuǎn)輪播圖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)旋轉(zhuǎn)輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
小程序Scroll-view上拉滾動(dòng)刷新數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了小程序Scroll-view上拉滾動(dòng)刷新數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
關(guān)于使用runtimeStyle屬性問題討論文章
關(guān)于使用runtimeStyle屬性問題討論文章...2007-03-03
下面小編就為大家?guī)硪黄猨s學(xué)習(xí)階段總結(jié)(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了JS桶排序的簡單理解與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了js桶排序的概念、原理、實(shí)現(xiàn)方法及操作注意事項(xiàng),需要的朋友可以參考下2019-11-11