JS中canvas画布绘制
2019-09-26 本文已影响0人
追逐_chase
web.jpeg
canvas的一些注意点
- 有一个默认的宽度和高度
300 *150 - 不要通过
css控制 他的宽高 会导致内部的图片被拉伸 - 重新设置标签的
宽高属性会让画布清除所有的内容 - 可以给画布设置背景颜色
1.绘制直线
<body>
<!--
1.有一个默认的宽度和高度 300 *150
2.不要有css控制 他的宽高 会导致内部的图片被拉伸
3.重新设置标签的宽高属性会让画布清除所有的内容
4.可以给画布设置背景颜色
-->
<canvas id="con" width="900" height="600">
</canvas>
</body>
<script>
//获取标签
var cancas = document.getElementById("con");
//获取上下文
var context = cancas.getContext("2d");
//开始一条路径
context.beginPath();
//设置起点
context.moveTo(100,50);
//设置终点
context.lineTo(100,300);
//设置颜色
context.strokeStyle = "red";
//设置线条宽度
context.lineWidth = 10;
//闭合路径
context.closePath();
//渲染绘制
context.stroke();
//绘制第二条直线
//需要开始一个新的路径
context.beginPath()
context.moveTo(20,150)
context.lineTo(200,150);
context.strokeStyle = "#0000FF";
context.closePath();
context.stroke();
</script>
image.png
- 绘制坐标系图表
<script type="text/javascript">
//获取
var convas = document.getElementById("con");
var margin = 20;
var rows = convas.clientHeight/margin;
var cols = convas.clientWidth/margin;
//获取上下文
var cxt = convas.getContext("2d");
for(var i = 1; i < rows; i ++){
cxt.moveTo(0,i * margin);
cxt.lineTo(convas.clientWidth,i * margin);
}
cxt.strokeStyle = "red";
cxt.lineWidth = 0.3;
//渲染绘制
cxt.stroke();
//开辟一个新的路径
cxt.beginPath();
for(var i = 1; i < cols; i ++ ){
//开启新的路径
cxt.moveTo(i * margin,0);
cxt.lineTo(i *margin,convas.clientHeight)
};
cxt.strokeStyle = "red";
cxt.lineWidth = 0.3;
//渲染绘制
cxt.stroke();
//绘制坐标系
var x0 = 100;
var y0 = 500;
var maxWidth = 500;
var maxHeight = 400;
//绘制
//开启一个新的路径
cxt.beginPath();
//设置起点
cxt.moveTo(x0,y0);
//设置终点
cxt.lineTo(x0 + maxWidth,y0);
cxt.lineTo(x0 + maxWidth - margin,y0 - margin);
//在这是一个起点
cxt.moveTo(x0 + maxWidth - margin,y0 + margin);
cxt.lineTo(x0 + maxWidth,y0);
//设置Y轴
//起点
cxt.moveTo(x0,y0);
//终点
cxt.lineTo(x0, y0 - maxHeight);
//设置箭头
cxt.lineTo(x0 + margin, y0 - maxHeight + margin);
//设置起点
cxt.moveTo(x0 - margin, y0 - maxHeight + margin);
cxt.lineTo(x0, y0 - maxHeight);
cxt.lineWidth = 1;
cxt.strokeStyle = "blue";
cxt.stroke();
//绘制折线
var data = [50,10,60,40,20,100];
//缩放比例
var w = maxWidth/data.length;
var h = maxHeight/100;
//制作坐标点
var pointArr = [];
for(var i = 0; i < data.length; i ++){
var point = {
x:x0 + (i + 1) * w,
y: y0 - data[i] * h
};
pointArr.push(point);
}
//绘制
cxt.beginPath();
cxt.moveTo(x0, y0);
for(var i = 0; i < pointArr.length; i ++){
var point = pointArr[i];
cxt.lineTo(point.x,point.y);
}
cxt.strokeStyle = "green";
cxt.stroke();
</script>
image.png
2.绘制矩形
cxt.rect(200,200,200,200);
<script type="text/javascript">
var can = document.getElementById("con");
var cxt = can.getContext("2d");
//绘制矩形的方法
cxt.rect(20,20,60,60);
cxt.strokeStyle = "blue";
cxt.lineWidth = 20;
//描边
cxt.stroke();
//填充
cxt.fillStyle = "red";
cxt.fill();
//快速描边
cxt.strokeStyle = "red";
cxt.lineWidth = 10;
cxt.strokeRect(200,200,200,200);
//快速填充
cxt.fillStyle = "blue";
cxt.fillRect(200,200,200,200);
//清除 橡皮檫 可以清除你画的
cxt.clearRect(200,200,100,100);
</script>
image.png
3.绘制弧线arc
<script type="text/javascript">
var canvas = document.getElementById("con");
//获取上下文
var cxt = canvas.getContext("2d");
/**
* 参数一： 坐标 x 点
* 参数二： 坐标 y 点
* 参数三: 半径
* 参数四: 开始的角度
* 参数五:结束的角度
* 参数6： 是否是顺时针 true 是 逆时针 false 顺时针
*/
cxt.arc(200,200,50,0,30,true);
cxt.lineWidth = 5;
cxt.stroke();
</script>
image.png
4.非零正交原则
- 计数器初始值为0
- 在要判断是否填充的区域，画一条射线，看射线与路径是否相交，顺时针相交+1，逆时针相交-1
- 计数器的最终值 如果为0就不填充，不是0填充
image.png
<script type="text/javascript">
var canvas = document.getElementById("con");
//获取上下文
var cxt = canvas.getContext("2d");
//例子
//顺时针画圆
cxt.arc(200,200,80,0,2 * Math.PI,false);
//逆时针画圆
cxt.arc(200,200,60,0,2 *Math.PI,true);
cxt.fillStyle = "red";
cxt.fill();
</script>
WX20190925-124632.png
5.绘制文字
cxt.strokeText("绘制文字，哈哈",100,100);
<script type="text/javascript">
var canvas = document.getElementById("con");
//获取上下文
var cxt = canvas.getContext("2d");
//绘制文字
//文字的类型和大小
cxt.font = "20px '微软雅黑'";
// c绘制
cxt.strokeStyle = "red";
//设置对齐方式
cxt.textAlign = "center";
cxt.strokeText("绘制文字，哈哈",100,100);
//绘制填充文字
cxt.beginPath();
cxt.font = "20px '微软雅黑'";
// c绘制
cxt.textAlign = "right";
cxt.fillStyle = "red";
cxt.fillText("绘制文字，哈哈",200,200);
</script>
image.png
- 绘制饼状图
<script type="text/javascript">
var canvas = document.getElementById("con");
//获取上下文
var cxt = canvas.getContext("2d");
//设置数据
var data = [
{name:"上海",coclor:"red",res:0.2},
{name:"北京",coclor:"green",res:0.2},
{name:"深圳",coclor:"black",res:0.3},
{name:"郑州",coclor:"purple",res:0.1},
{name:"南京",coclor:"blue",res:0.2},
];
var x = canvas.clientWidth *0.5;
var y = canvas.clientHeight *0.5;
var r = 180;
var startA = - Math.PI * 0.5;
var endA = 0;
var temp = 0;
for(var i = 0; i < data.length; i ++){
var obj = data[I];
temp = obj.res * 360 *Math.PI/180;
//设置结束的度数
endA = startA + temp;
//每一次 开启一个新的路径
cxt.beginPath();
//设置一个起点 为了 填充
cxt.moveTo(x,y);
//绘制弧线
cxt.arc(x,y,r,startA,endA,false);
//填充颜色
cxt.fillStyle = obj.coclor;
//填充
cxt.fill();
//绘制文字
//获取文字拼接
var text = obj.name + obj.res * 100 + "%";
//获取文字显示的位置
var textX = Math.cos(startA + temp/2) * (r + 20) + x;
var textY = Math.sin(startA + temp/2) * (r + 20) + y;
console.log(textX+"---" + textY);
//让左半圆的文字 向右对齐显示完整
if(startA + temp/2 > 90 *Math.PI /180 && startA + temp/2 < 270 * Math.PI/180){
cxt.textAlign = "right";
}
cxt.fillText(text,textX,textY);
//更新起点
startA = endA;
}
</script>
image.png
6.绘制图片
cxt.drawImage(imgObj,sx,sy,swidth,sheight,x,y,width,height);
参数解释：
sx,sy是裁剪图片的起始点
swidth,sheight是裁剪图片的宽和高
x,y把裁剪得到的图片 放置的坐标点
width,height 把裁剪得到的图片 设置显示的宽和高
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("con");
//获取上下文
var cxt = canvas.getContext("2d");
//获取一个图片对象
var image = document.getElementById("img_1");
//绘制图片
/*
在绘制图片的时候 必须有一个 图片的对象
*/
//图片的宽高要等比缩放
var w = 300;
var h = image.height/image.width *w;
cxt.drawImage(image,10,10,w,h);
</script>
image.png
- 图片绘制的裁剪
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("con");
//获取上下文
var cxt = canvas.getContext("2d");
//方式二
var imgObj = new Image();
imgObj.src = "img/1.jpg";
//图片加载完成之后,才可以绘制
imgObj.onload = function(){
// cxt.drawImage(imgObj,sx,sy,swidth,sheight,x,y,width,height);
/*
sx,sy是裁剪图片的起始点
swidth,sheight是裁剪图片的宽和高
x,y把裁剪得到的图片 放置的坐标点
width,height 把裁剪得到的图片 设置显示的宽和高
*/
cxt.drawImage(imgObj, 100, 100, 400, 200, 450, 100, 400, 200);
}
}
</script>
image.png
