Canvas
<html>
<head>
<title>
</title>
<style>
.header_box {
margin-top: 40px;
text-align: center;
}
.header_box input{
width:60px;
height:30px;
border: 1px solid #666;
margin-left: 8px;
}
.header_box span{
margin-left: 8px;
}
.header_box select{
width:60px;
height:30px;
margin-left: 8px;
color:#444;
font-size: 16px;
}
.header_box button{
width:60px;
height:30px;
margin-left: 8px;
color:#fff;
border-radius: 4px;
background-color: #444;
border: 0;
cursor: pointer;
}
.header_box button:hover,.footer_box button:hover{
background-color: #000;
}
.canvas_background{
width:660px;
height:660px;
background-color: #333;
margin: 40px auto;
position: relative;
}
.footer_box{
text-align: center;
}
.footer_box button{
width:80px;
height:30px;
margin-left: 8px;
color:#fff;
border-radius: 4px;
background-color: #444;
border: 0;
cursor: pointer;
}
.point_box{
width:9px;
height:9px;
position: absolute;
z-index: 1001;
}
.point{
position: absolute;
left:0;
top:0;
width:9px;
height:9px;
background-color: #F9F900;
border-radius: 9px;
cursor: pointer;
display:block;
z-index: 1003;
}
.point:hover{
box-shadow: 0 0 15px #FFFF37;
}
.line{
position: absolute;
left:0;
top:0;
background-color: #ff00ff;
width:100px;
height:0px;
border: 1px solid #ff00ff;
transform:rotate(0deg);
transform-origin:0% 0%;/*定義動畫的旋轉中心點*/
}
.line:hover{
box-shadow: 0 0 6px #ff00ff;
cursor: pointer;
}
.rect{
margin-top: 50px;
background-color: #ff00ff;
width:100px;
height:0px;
border: 1px solid #ff00ff;
transform:rotate(50deg);
transform-origin:0% 0%;/*定義動畫的旋轉中心點*/
}
.rect:hover{
box-shadow: 0 0 6px #ff00ff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="rect"></div>
<div class="header_box">
<span>網格大小：</span><input type="text" id="grid_rows"><span>行</span><input type="text" id="grid_cols"><span>列</span>
<span>單位長度:</span><input type="text">
<select>
<option>cm</option>
<option>m</option>
</select>
<button id="size_btn">肯定</button>
</div>
<div class="canvas_background" id="canvas_background">
<canvas id="canvas_grid">
</canvas>
</div>
<div class="footer_box">
<button id="reset_btn">重置</button>
<button id="excute_btn">計算</button>
<button id="export_btn">導出</button>
</div>
</body>
<script src="../static/jquery-1.8.3.min.js"></script>
<script>
//600
var canvasGridWidth = 600;
var canvasWidth = 660;
var canvasHeight = 660;
var points_list = [];
var map = {};
$('#canvas_grid').attr('width',canvasWidth);
$('#canvas_grid').attr('height',canvasHeight);
var ctx=$('#canvas_grid')[0].getContext("2d");
var imgData=ctx.createImageData(canvasWidth,canvasHeight);
for(var i=0;i<canvasHeight;i++)
{
for(var j=0;j<canvasWidth;j++)
{
var x = i*4*canvasWidth + j*4;
imgData.data[x] = 80;
imgData.data[x+1] = 80;
imgData.data[x+2] = 80;
imgData.data[x+3]= 255;
}
}
ctx.putImageData(imgData,0,0);
drawGrid(9,9);
$('#size_btn').on('click',function(){
ctx.clearRect(0,0,canvasWidth,canvasHeight);
var rows = parseInt($('#grid_rows').val());
var cols = parseInt($('#grid_cols').val());
points_list = [];
drawGrid(rows,cols);
})
function drawGrid(rows,cols){
var val = 0;
if(rows > cols){
val = canvasGridWidth*1.0/(rows-1);
}else{
val = canvasGridWidth*1.0/(cols-1);
}
var left = 30;
var right = left+(cols-1)*val;
var top = 30;
var bottom = top+(rows-1)*val;
for(var i=0;i<rows;i++){
var x1 = parseInt(left);
var y1 = parseInt(top+i*val);
var x2 = parseInt(right);
var y2 = parseInt(top+i*val);
drawLine(x1,y1,x2,y2);
}
for(var j=0;j<cols;j++){
var x1 = parseInt(left+j*val);
var y1 = parseInt(top);
var x2 = parseInt(left+j*val);
var y2 = parseInt(bottom);
drawLine(x1,y1,x2,y2);
}
drawGridPoints(rows,cols,val);
}
function drawGridPoints(rows,cols,val){
var left = 30;
var top = 30;
for(var i=0;i<rows;i++)
{
for(var j=0;j<cols;j++){
var _left = left + j*val;
var _top = top + i*val;
points_list.push({
'x':_left,
'y':_top
})
}
}
}
$('#canvas_background').click(function(event){
var _x = event.offsetX;
var _y = event.offsetY;
console.log(_x,_y);
var esp = 10;
for(var i=0;i<points_list.length;i++){
var pos = points_list[i];
if(_x > pos.x-esp && _x < pos.x+esp && _y > pos.y-esp && _y < pos.y + esp){
if(typeof map[pos.x+'_'+pos.y] === 'undefined'){
//drawCircle(pos.x,pos.y);
var _id = pos.x+'_'+pos.y;
$(this).append('<div id="'+_id+'" class="point"></div>');
drawPointEx($('#'+_id),pos.x,pos.y);
map[pos.x+'_'+pos.y] = 1;
console.log('add');
}
}
}
})
$('#canvas_background').dblclick(function(event){
for(var i=0;i<points_list.length;i++){
var pos = points_list[i];
if(_x > pos.x-esp && _x < pos.x+esp && _y > pos.y-esp && _y < pos.y + esp){
if(typeof map[pos.x+'_'+pos.y] === 'undefined'){
drawCircle(pos.x,pos.y);
map[pos.x+'_'+pos.y] = 1;
console.log('add');
}
}
}
})
function drawCircle(x1,y1){
ctx.beginPath();
ctx.arc(x1,y1,5,0,2*Math.PI,true);
ctx.fillStyle = '#ff0000';
ctx.strokeStyle = '#ff0000';
ctx.fill();
ctx.closePath();
ctx.stroke();
}
function drawLine(x1,y1,x2,y2){
ctx.beginPath();
ctx.strokeStyle= '#888';
ctx.lineWidth = 1;
ctx.moveTo(x1+0.5,y1+0.5);
ctx.lineTo(x2+0.5,y2+0.5);
ctx.closePath();
ctx.stroke();
}
function drawPointEx(ele,x1,y1){
ele.css({
'left':(x1-4)+'px',
'top':(y1-4)+'px'
})
}
function drawLineEx(ele,x1,y1,x2,y2){
}
$('#export_btn').click(function(){
saveAsLocalImage();
})
function saveAsLocalImage () {
var myCanvas = document.getElementById('canvas_grid');
var image = myCanvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
window.location.href=image;
}
</script>
</html>
相關文章
- 1. [Canvas]1-1Hello canvas
- 2. canvas
- 3. Canvas
- 4. CANVAS
- 5. canvas②
- 更多相關文章...
- • Mozilla Firefox 瀏覽器 - 瀏覽器信息
- • Internet Explorer 瀏覽器 - 瀏覽器信息
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
