js+canvas实现简单绘图

最新推荐文章于 2022-08-14 10:52:58 发布

无法预知未来

最新推荐文章于 2022-08-14 10:52:58 发布

阅读量668

点赞数

分类专栏： js HTML5 文章标签： javascript 绘图

本文链接：https://blog.csdn.net/sinat_26987533/article/details/48369717

版权

js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

HTML5

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas 画布</title>
<style>
#canvas{
border:1px solid #999;
background:#cfc;
width:640px; height:450px;}
#arc,#polygon,#asd,#square,#line,#triangle{width:600px;height:400px;border:1px solid red;}

</style>
</head>
<body>
<canvas id="canvas" width="600" height="400">
The Canvas HTML5 element si not supported by your browser.
Please run this page in a different browser.
</canvas>

<canvas id="asd" width="600" height="400"></canvas>
<canvas id="square" width="600" height="400"></canvas>
<canvas id="line" width="600" height="400"></canvas>
<canvas id="triangle" width="600" height="400"></canvas>
<canvas id="arc" width="600" height="400"></canvas>
<br><br><br><br>
<h1>多边形</h1>
<canvas id="polygon" width="400" height="400"></canvas>
<br>
Number of Sides:<input type="number" id="numSides" min="3" step="1" value="7"/><br>
Radius:<input type="number" id="radius" min="10" step="1" value="150"/><br>
<button id="drawPlygon"> Draw Polygon</button>
<script src="js/jquery1.11.js"></script>
<script>
var canvas;
var context;
//绘制弧线和圆形
function arc(){

var canvas = document.getElementById('arc').getContext('2d');
//语法 canvas.arc(x,y,radius,startAngle,endAngle,antiClockwise(Boolean));
//canvas.arc(100,100,80,18,20,false);
canvas.arc(100,100,80,18,20,true);
//画笔颜色
canvas.strokeStyle ='#000';
//画笔的大小
canvas.lineWidth = 2;
//开始执行
canvas.stroke();
}
//绘制多边形
function inint(){
var btn = document.getElementById('drawPlygon');
btn.addEventListener('click',drawPlygon,false);
canvas = document.getElementById('polygon');
context = canvas.getContext('2d');
}
function polygon(){

var numSides = document.getElementById('numSides').value;
var radius = document.getElementById('radius').value;

var xCenter = parseInt(canvas.width/2);
var yCenter = parseInt(canvas.height/2);

context.clearRect(0,0,canvas.width,canvas.height);

context.beginPath();

var xPos = xCenter + radius* Math.cos(2 * Math.PI * 0 /numSides);
var yPos = yCenter + radius* Math.sin(2 * Math.PI * 0 /numSides);
context.moveTo(xPos,yPos);

for(i = 1; i <= numSides;i++ ){
xPos = xCenter + radius* Math.cos(2 * Math.PI * i /numSides);
yPos = yCenter + radius* Math.sin(2 * Math.PI * i /numSides);
context.moveTo(xPos,yPos);
}

context.closePath();

context.lineWidth = 30;
context.lineJoin = 'round';
context.stroke();

context.fillStyle = '#00f';
context.fill();
}
window.addEventListener('load',inint,false);

//网格
function showGrid(){
//获取canvas 元素
canvas = document.getElementById('canvas');
//绘制环境
context = canvas.getContext('2d');
//线宽度
context.lineWidth = 1;
//线条颜色
context.strokeStyle = '#999';
//设置网格间隔为100
lineSpacing = 100;
//起始坐标为(0,0)
var xPos = 0;
var yPos = 0;
//获取canvas 的宽度高度
var numHorizontaLines = parseInt(canvas.height/lineSpacing);
var numVerticalLines = parseInt(canvas.width/lineSpacing);

for(var i =1; i <= numHorizontaLines;i++){
yPos = i*lineSpacing;
//在canvas 画布中的当前位置，从此位置开始绘制
context.moveTo(0,yPos);
//在canvas 画布中的终点，画到此坐标结束。
context.lineTo(canvas.width,yPos);
//执行画笔绘制图形或线段
context.stroke();
}

for(var i =1; i <= numVerticalLines;i++){
xPos = i*lineSpacing;
//在canvas 画布中的当前位置，从此位置开始绘制
context.moveTo(xPos,0);
//在canvas 画布中的终点，画到此坐标结束。
context.lineTo(xPos,canvas.height);
//在canvas 画布中的终点，画到此坐标结束。
context.stroke();
}
for(var y= 0;y<=numHorizontaLines;y++){
for(var x= 0;x<=numVerticalLines;x++){
xPos = x*lineSpacing;
yPos = y*lineSpacing;

if(x==0 && y==0){
context.fillStyle = 'red';
}else{
context.fillStyle = '#000';
}

context.beginPath();
//在交点处绘制一个圆形
context.arc(xPos,yPos,5,0,Math.PI*2,true);
context.closePath();
//执行
context.fill();

if(x==numVerticalLines){
context.textAlign = 'right';
xPos -= 5;
}else{
context.textAlign = 'left';
xPos += 5;
}
if(y==numHorizontaLines){
yPos -= 8;
}else{
yPos += 12;
}
//显示坐标文字
//context.fillText('('+x*lineSpacing','+y*lineSpacing')',xPos,yPos);
}
}
}
window.addEventListener('load',showGrid,false);
$(function(){
arc();
square();
asd();
line();
triangle();
//polygon();
});
//绘制矩形
function square(){
//获取canvas 元素
var canvas = document.getElementById('square').getContext('2d');
//设置阴影偏移距离
canvas.shadowOffsetX = 10;
canvas.shadowOffsetY = 10;
//设置阴影的模糊度
canvas.shadowBlur = 10;
//设置阴影颜色
canvas.shadowColor = 'rgba(200,0,200,.3)';
//设置图形内部填充的颜色或样式
canvas.fillStyle = 'rgba(200,0,200,1)';
//设置图形边线的颜色或样式
canvas.strokeStyle = '#09c';
//与 strokeRect 结合绘制图形边线
canvas.lineWidth = 5;
// 设置图形的宽高 fillRect(pos-x,pos-y,width,height)
canvas.fillRect(0,0,100,100);
//清空canvas 或者特定的区域
canvas.clearRect(25,25,50,50);
//给canvas 或者特定的区域绘制边框
canvas.strokeRect(25,25,50,50);

}
//线性渐变色填充
function asd(){
//获取canvas 元素
var canvas = document.getElementById('asd').getContext('2d');
//创建图形线性填充
var grd = canvas.createLinearGradient(0,200,200,0);
//添加颜色
grd.addColorStop(0,'#000');
grd.addColorStop(0.5,'#ccc');
grd.addColorStop(1,'#000');
//设置图形内部填充的颜色或样式
canvas.fillStyle = grd;
//设置图形边线的颜色或样式
canvas.strokeStyle = '#09c';
//与 strokeRect 结合绘制图形边线
canvas.lineWidth = 5;
// 设置图形的宽高 fillRect(pos-x,pos-y,width,height)
canvas.fillRect(0,0,200,200);
//停止绘制
canvas.closePath();

//创建图形放射状填充
var grd1 = canvas.createRadialGradient(300,250,2,200,200,250);
//颜色
grd1.addColorStop(0,'#000');
grd1.addColorStop(1,'#ccc');
//设置图形内部填充的颜色或样式
canvas.fillStyle = grd1;
// 设置图形的宽高
canvas.fillRect(200,200,200,200);
canvas.closePath();
}
//绘制线段
function line(){
var canvas = document.getElementById('line').getContext('2d');
canvas.moveTo(10,10);
canvas.lineTo(600,400);
canvas.stroke();
}
//绘制三角形
function triangle(){
var canvas = document.getElementById('triangle').getContext('2d');
//
canvas.beginPath();
canvas.moveTo(10,10);
canvas.lineTo(600,300);//对角线
canvas.lineTo(10,300);//底线
canvas.lineTo(10,10);//上，左对边线间距

//停止绘制
canvas.closePath();

canvas.strokeStyle = '#000';
canvas.lineWidth = 3;

canvas.fillStyle = "#ccc";
canvas.fill();
//执行绘制
canvas.stroke();
}
</script>
</body>
</html>