canvas 绘制基本图形
2017-12-26 本文已影响12人
雅玲哑铃
样例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas width="500px" height="500px" id="mycanvas">
对不起，您的浏览器版本过低，点击<a href="#">下载</a>
</canvas>
</body>
<script type="text/javascript">
//获取canvas节点
var canvas = document.getElementById("mycanvas");
//获取canvas画布的上下文
var context = canvas.getContext("2d");
</script>
</html>
绘制清单
图片.png
一、画线
图片.png
图片.png
通过学习了绘制直线，我们可以来实现一个简单的画板了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="400" height="400">你的浏览器不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context =canvas.getContext("2d");
//鼠标按下并且鼠标移动才能画线
canvas.onmousedown = function(e){
var ev = e || window.event;
//获取鼠标按下时坐标
var x = ev.clientX-canvas.offsetLeft;
var y = ev.clientY-canvas.offsetTop;
context.beginPath();
context.moveTo(x,y);
canvas.onmousemove = function(e){
var ev = e || window.event;
//获取鼠标移动时的坐标
var xx = ev.clientX-canvas.offsetLeft;
var yy = ev.clientY-canvas.offsetTop;
context.lineTo(xx,yy);
context.stroke();
}
}
document.onmouseup = function(){
canvas.onmousemove = "";
}
</script>
</html>
图片.png
二、绘制矩形
方法一：绘制一个填充的矩形
<script type="text/javascript">
var colorArr = ["red","blue","yellow","whitesmoke"];
var canvas = document.getElementById("mycanvas");
var context =canvas.getContext("2d");
context.beginPath();
context.fillStyle = "palevioletred";
context.fillRect(100,100,200,100);
context.fill();
</script>
图片.png
方法二：绘制一个矩形的边框,不能填充颜色
context.beginPath();
context.strokeRect(100,100,200,100);
context.stroke();
图片.png
方法三：绘制一个矩形边框，可以填充颜色
context.beginPath();
context.fillStyle = "palevioletred";
context.rect(100,100,200,100);
context.fill();
context.stroke();
图片.png
通过学习了矩形，我们可以来实现一个国际象棋的棋盘了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="800" height="800"></canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
//方法一
// var colors = ["white","black"];
// for(var i=0;i<8;i++){
// for(var j=0;j<8;j++){
// context.beginPath();
// if( i % 2 == 0 && j % 2 != 0 || i % 2 != 0 && j % 2 == 0 ){
// context.fillStyle = colors[0];
// }else{
// context.fillStyle = colors[1];
// }
// context.fillRect(i*100,j*100,100,100);
// }
// }
//方法二
for(var i=0;i<800;i+=200){
for(var j=0;j<800;j+=200){
context.beginPath();
context.fillRect(i,j,100,100);
context.fillRect(i+100,j+100,100,100);
}
}
</script>
</html>
这里有两个方法，第一种是分别设置白色和黑色的矩形
第二种是只设置黑色的矩形
图片.png
三、绘制圆形
前两个参数是圆心的坐标，第三个参数是半径，第四五个参数是圆开始画的角度和结束的角度（PI表示）最后一个参数是布尔：true：逆时针，false:(默认)顺时针
图片.png
图片.png
学习了圆的绘制，我们可以绘制一个太极八卦图了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>太极八卦图</title>
<style type="text/css">
canvas{
border:1px solid cornflowerblue;
background-color: #ADD8E6;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="500" height="500">您的浏览器不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context =canvas.getContext("2d");
context.beginPath();
context.arc(250,250,100,0,Math.PI);
context.fillStyle = "#000000";
context.fill();
context.beginPath();
context.arc(250,250,100,0,Math.PI,true);
context.fillStyle = "white";
context.fill();
context.beginPath();
context.arc(300,250,50,0,Math.PI,true);
context.fillStyle = "#000000";
context.fill();
context.beginPath();
context.arc(200,250,50,0,Math.PI);
context.fillStyle = "white";
context.fill();
context.beginPath();
context.arc(300,250,10,0,Math.PI*2);
context.fillStyle = "white";
context.fill();
context.beginPath();
context.arc(200,250,10,0,Math.PI*2);
context.fillStyle = "#000000";
context.fill();
</script>
</html>
图片.png
四、绘制文字
context.beginPath();
context.textBaseline = "middle"; //文字垂直对齐方法
context.textAlign = "center"; //文字水平对齐方法
context.font = "bold 20px Arial"; //(加粗 大小）字体样式
context.fillStyle = "red";
context.fillText("你好",100,100); //文字内容，每个横坐标定长，纵坐标随机
我们可以利用这种设置文字的样式，绘制一个验证码的图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="100" height="30">你的浏览器不支持canvas</canvas>
</body>
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
//随机(大小，位置随机但不重叠)字符（透明度），随机背景颜色（浅色200——250）
//干扰项：3个左右的随机（半径随机，位置随机:有部分在画布上）干扰圆
//3个左右的随机（长度随机，位置随机）干扰线
var strStore = "abcdefghijklmnopqrstuvwxyzABCDEFJHIJKLMNOPQRSTUVQXYZ0123456789";
//随机函数
function randNum(min,max){
return parseInt(Math.random()*(max-min))+min;
}
//随机颜色
var colors = `rgb(${randNum(200,255)},${randNum(200,255)},${randNum(200,255)})`
context.beginPath();
context.fillStyle = colors;
context.fillRect(0,0,canvas.width,canvas.height);
context.globalAlpha = 0.7;
context.fill();
for(var i=0;i<5;i++){
var str = strStore[randNum(0,strStore.length)];
context.beginPath();
context.textBaseline = "middle"; //文字垂直对齐方法
context.textAlign = "center"; //文字水平对齐方法
context.font = "bold "+randNum(20,30)+"px Arial"; //(加粗 大小）字体样式
context.fillStyle = `rgb(${randNum(0,200)},${randNum(0,200)},${randNum(0,200)})`;
context.fillText(str,10+i*20,randNum(10,20)); //文字内容，每个横坐标定长，纵坐标随机
}
//干扰项:
for(var i=0;i<3;i++){
//干扰圆
context.beginPath();
context.arc(randNum(0,100),randNum(0,30),randNum(3,20),0,Math.PI*2);
context.strokeStyle = `rgb(${randNum(0,200)},${randNum(0,200)},${randNum(0,200)})`;
context.stroke();
//干扰线
context.beginPath();
context.moveTo(randNum(0,100),randNum(0,30));
context.lineTo(randNum(0,100),randNum(0,30));
context.strokeStyle = `rgb(${randNum(0,200)},${randNum(0,200)},${randNum(0,200)})`;
context.stroke();
}
</script>
</html>
图片.png
