通過畫布制作圖像
[英]Make an image via canvas
問題描述
我試圖做下一件事（我試圖通過css： http ： //jsfiddle.net/kyfha/74/，但用戶建議我通過畫布做）。 所以我試過畫布：
當用戶超出所有這些形狀時，它將被更改為：
當用戶超出此形狀時，它將更改為圖像編號1。
如果，在圖像編號2中，他按下小灰色圓圈，圖像將變為：
如果他按下小的淺藍色圓圈，它將被改為圖像編號2。
我嘗試通過canvas ， javascript和css制作它，我得到了形狀。
我要做的是在灰色形狀的中間放置一個淺藍色圓圈（它將始終存在）並在藍色形狀的末尾放置一個小綠色圓圈。
藍色形狀可以更長，更小或左側。
例如：
另外，當用戶按下小圓圈時，我必須在按下的小圓圈中放置一條線（例如，圖像2和3）。
我定義為canvas：canvas（灰色形狀）和canvas2（灰色形狀內的藍色形狀）。
這是我的jsfiddle ：
http://jsfiddle.net/Ht6Ym/2250/
這是我的HTML：
<div>
<canvas id="myCanvas" width="578" height="250" style="position: absolute;">
</canvas>
<canvas id="myCanvas2" width="578" height="250" style="position: absolute;">
</canvas>
</div>
<a href="#" class="button">Hello</a>
<a href="#" class="css-shapes-preview">Bye</a>
任何幫助贊賞!!
1 個解決方案
解決方案1
3 已采納 2013-12-12 22:10:54
我不太清楚為什么，但我對你的設計很感興趣，所以................
這里有一些幫助在畫布中完全繪制畫布形狀。
演示： http ： //jsfiddle.net/m1erickson/c4upM/
要使任何形狀可單擊，請檢查context.isPointInPath以進行命中測試。 我把交互性留給你了。
祝你的項目好運！
碼：
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cx=150;
var cy=100;
var radius=75;
var linewidth=15;
var PI=Math.PI;
roundRect("Bye");
grayArc("gray");
blueArc("blue",PI*1.25,PI*1.5);
circleInArc("skyblue",PI*1.5);
lineThruArc("skyblue",PI*1.5);
circleInArc("lightgray",PI*1.25);
lineThruArc("lightgray",PI*1.25);
cy+=150;
lightblueCircle("Hello");
grayArc("gray");
blueArc("blue",PI*1.25,PI*1.5);
circleInArc("skyblue",PI*1.5);
lineThruArc("skyblue",PI*1.5);
circleInArc("lightgray",PI*1.25);
lineThruArc("lightgray",PI*1.25);
function grayArc(strokeColor){
ctx.beginPath();
ctx.arc(cx,cy,radius,Math.PI,Math.PI*2);
ctx.lineWidth=linewidth;
ctx.strokeStyle=strokeColor;
ctx.stroke();
}
function blueArc(strokeColor,radianStart,radianEnd){
ctx.beginPath();
ctx.arc(cx,cy,radius,radianStart,radianEnd);
ctx.lineWidth=linewidth;
ctx.strokeStyle=strokeColor;
ctx.stroke();
}
function circleInArc(fillColor,radianAngle){
var x=cx+radius*Math.cos(radianAngle);
var y=cy+radius*Math.sin(radianAngle);
ctx.beginPath();
ctx.arc(x,y,linewidth/2,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=fillColor;
ctx.fill();
}
function lineThruArc(strokeColor,radianAngle){
var length=40;
var x1=cx+(radius-length/2)*Math.cos(radianAngle);
var y1=cy+(radius-length/2)*Math.sin(radianAngle);
var x2=cx+(radius+length/2)*Math.cos(radianAngle);
var y2=cy+(radius+length/2)*Math.sin(radianAngle);
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.strokeStyle=strokeColor;
ctx.lineWidth=2;
ctx.stroke();
}
function lightblueCircle(text){
ctx.beginPath();
ctx.arc(cx,cy,radius-25,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle="skyblue";
ctx.fill();
ctx.fillStyle="white";
ctx.font="18px verdana";
var halfWidth=ctx.measureText(text).width/2
ctx.fillText(text,cx-halfWidth,cy);
}
function roundRect(text){
var x=cx-radius+20;
var y=cy-25-5;
var width=radius*2-40;
var height=radius*.66;
var cornerRadius=15;
ctx.beginPath();
ctx.moveTo(x+cornerRadius,y);
ctx.lineTo(x+width-cornerRadius,y);
ctx.quadraticCurveTo(x+width,y,x+width,y+cornerRadius);
ctx.lineTo(x+width,y+height-cornerRadius);
ctx.quadraticCurveTo(x+width,y+height,x+width-cornerRadius,y+height);
ctx.lineTo(x+cornerRadius,y+height);
ctx.quadraticCurveTo(x,y+height,x,y+height-cornerRadius);
ctx.lineTo(x,y+cornerRadius);
ctx.quadraticCurveTo(x,y,x+cornerRadius,y);
ctx.closePath();
ctx.fillStyle="skyblue";
ctx.fill();
ctx.fillStyle="white";
ctx.font="18px verdana";
var halfWidth=ctx.measureText(text).width/2
ctx.fillText(text,cx-halfWidth,cy);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=325></canvas>
</body>
</html>
使畫布大小達到圖像大小？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.