課程
/前端開發
/Html5
/Canvas繪圖詳解
老師，canvas能用Eclipse工具寫嗎??
2014-10-21
源自：Canvas繪圖詳解 2-1
正在回答
sublime不錯
cxt.moveTo(piece.p[0].x ,piece.p[0].y);
好嘞，已經使用webstorm啦，但是效果咋實現不了呢，
幫忙看下哪里有錯，為毛運行不出七巧板的效果來呢，canvas內總是空白一片
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title></title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
? ? 此瀏覽器不支持canvas
</canvas>
<script>
? ? var tangram = [
? ? ? ? {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
? ? ? ? {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
? ? ? ? {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
? ? ? ? {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
? ? ? ? {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
? ? ? ? {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
? ? ? ? {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
? ? ]
? window.onload = function(){
? ? ? ? var canvas = document.getElementById("canvas");
? ? ? ? canvas.width=800;
? ? ? ? canvas.height=800;
? ? ? ? var context = canvas.getContext("2d");
? ? ? ? for(var i=0; i< tangram.length; i++)
? ? ? ? ? draw( tangram[i],context)
? }
? ? function draw(piece,cxt){
? ? ? ? cxt.beginPath();
? ? ? ? cxt.move(piece.p[0].x ,piece.p[0].y);
? ? ? ? for(var i=1; i<piece.p.length; i++)
? ? ? ? ? ? ?cxt.lineTo(piece.p[i].x,piece.p[i].y);
? ? ? ? ?cxt.closePath();
? ? ? ? ?cxt.fillStyle = piece.color;
? ? ? ? ?cxt.fill();
? ? }
</script>
</body>
</html>
canvas是html5標準的一部分，所以只要能寫html和js的IDE都可以。eclipse還是寫后端多一些，但是我看似乎也有寫html和js的插件，你可以研究研究看，我沒有用eclipse寫過前端。不過真心推薦webstorm哦～
舉報
Canvas系列教程第二課,詳解Canvas各接口，讓同學徹底掌握Canvas繪圖
1 回答為什么我的代碼是空白的 請教大神
1 回答如果真的自己要繪制一個圖形 具體坐標是很難得到的
1 回答canvas 動畫曲線
1 回答星星出不來？
1 回答?arcTo()中沒有x0，y0，起始點的坐標是怎么得到的？
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2015-03-31
sublime不錯
2015-02-05
cxt.moveTo(piece.p[0].x ,piece.p[0].y);
2014-11-04
好嘞，已經使用webstorm啦，但是效果咋實現不了呢，
幫忙看下哪里有錯，為毛運行不出七巧板的效果來呢，canvas內總是空白一片
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title></title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
? ? 此瀏覽器不支持canvas
</canvas>
<script>
? ? var tangram = [
? ? ? ? {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"},
? ? ? ? {p:[{x:0,y:0},{x:400,y:400},{x:0,y:800}],color:"#67becf"},
? ? ? ? {p:[{x:800,y:0},{x:800,y:400},{x:600,y:600},{x:600,y:200}],color:"#ef3d61"},
? ? ? ? {p:[{x:600,y:200},{x:600,y:600},{x:400,y:400}],color:"#f9f51a"},
? ? ? ? {p:[{x:400,y:400},{x:600,y:600},{x:400,y:800},{x:200,y:600}],color:"#a594c0"},
? ? ? ? {p:[{x:200,y:600},{x:400,y:800},{x:0,y:800}],color:"#fa8ecc"},
? ? ? ? {p:[{x:800,y:400},{x:800,y:800},{x:400,y:800}],color:"#f6ca29"}
? ? ]
? window.onload = function(){
? ? ? ? var canvas = document.getElementById("canvas");
? ? ? ? canvas.width=800;
? ? ? ? canvas.height=800;
? ? ? ? var context = canvas.getContext("2d");
? ? ? ? for(var i=0; i< tangram.length; i++)
? ? ? ? ? draw( tangram[i],context)
? }
? ? function draw(piece,cxt){
? ? ? ? cxt.beginPath();
? ? ? ? cxt.move(piece.p[0].x ,piece.p[0].y);
? ? ? ? for(var i=1; i<piece.p.length; i++)
? ? ? ? ? ? ?cxt.lineTo(piece.p[i].x,piece.p[i].y);
? ? ? ? ?cxt.closePath();
? ? ? ? ?cxt.fillStyle = piece.color;
? ? ? ? ?cxt.fill();
? ? }
</script>
</body>
</html>
2014-10-21
canvas是html5標準的一部分，所以只要能寫html和js的IDE都可以。eclipse還是寫后端多一些，但是我看似乎也有寫html和js的插件，你可以研究研究看，我沒有用eclipse寫過前端。不過真心推薦webstorm哦～