canvas是一张画布
值 | 含义 |
---|---|
lineWidth | 线的宽度 |
fillStyle | 填充颜色 |
.moveTo(100, 200) | x点的坐标,y的坐标 |
butt | 默认。向线条的每个末端添加平直的边缘。 |
round | 向线条的每个末端添加圆形线帽。 |
square | 向线条的每个末端添加正方形线帽。 |
画不同拐角的箭头
html代码如下:
<canvas id="mycanvas" width="600px" height="600px" style="border:1px solid #000000 ;"></canvas>
js代码:
<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(200, 120);
ctx.lineTo(300, 200);
ctx.strokeStyle = 'red';
ctx.lineWidth = 20;
ctx.lineCap = 'butt';
ctx.lineJoin = 'miter';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100, 300);
ctx.lineTo(200, 220);
ctx.lineTo(300, 300);
ctx.strokeStyle = 'green';
ctx.lineWidth = 30;
ctx.lineCap = 'square';
ctx.lineJoin = 'level';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100, 400);
ctx.lineTo(200, 320);
ctx.lineTo(300, 400);
ctx.strokeStyle = 'green';
ctx.lineWidth = 30;
ctx.lineCap = 'round';
ctx.lineJoin = 'round';
ctx.stroke();
</script>
js绘制虚线
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.Drawdashed();
function Drawdashed(){
cxt.lineWidth = 4;
cxt.strokeStyle = 'green';
cxt.beginPath();
//绘制虚线,线段的宽度和空隙的宽度
cxt.setLineDash([5, 15]);
cxt.moveTo(20, 20);
cxt.lineTo(400, 20);
cxt.stroke();
}
绘制渐变矩形:
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 100;
for(var i = 0; i < 255; i++) {
每次循环路径不同,rgb(0-255) 渐变
ctx.beginPath();
ctx.moveTo(90 + i, 100);
ctx.lineTo(90 + i - 1, 100);
ctx.strokeStyle = 'rgb(' + i + ',' + i + ',' + i + ')';
ctx.stroke();
}
画网格线
画每行的宽/多少格,每行的高/多少格,绘制点的坐标和线段的长度绘制
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext("2d");
var grid = 100;
var canvasHeight = ctx.canvas.height;
var canvasWidth = ctx.canvas.width;
var xlineTotal = Math.floor(canvasHeight / grid);
for(var i = 0; i <= xlineTotal; i++) {
ctx.beginPath();
ctx.moveTo(0, i * grid);
ctx.lineTo(canvasWidth, i * grid);
ctx.stroke();
}
var ylineTotal = Math.floor(canvasHeight / grid);
for(var i = 0; i <= ylineTotal; i++) {
ctx.beginPath();
ctx.moveTo(i * grid, 0);
ctx.lineTo(i * grid, canvasHeight);
ctx.stroke();
}
var canvas = document.getElementById(“canvas2”);
var ctx = canvas.getContext("2d");
var w = ctx.canvas.width;
var h = ctx.canvas.height;
var num = 6;
var angle = Math.PI * 2 / num;
var x0 = w / 2;
var y0 = h / 2;
var getColor = function() {
//去掉颜色一样的,重复的。
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
// var startAngle = 0;
for(var i = 0; i < num; i++) {
var startAngle = i * angle;
var endAngle = (i + 1) * angle;
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.arc(x0, y0, 150, startAngle, endAngle);
ctx.fillStyle = getColor();
ctx.fill();
}
</script>-->
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 100;
for(var i = 0; i < 255; i++) {
ctx.beginPath();
ctx.moveTo(90 + i, 100);
ctx.lineTo(90 + i - 1, 100);
ctx.strokeStyle = 'rgb(' + i + ',' + i + ',' + i + ')';
ctx.strokeStyle = 'rgb(' + 200 + ',' + 210 + ',' + i + ')';
ctx.stroke();
}
绘制可随机换颜色的圆,分成几份,随机填充
var canvas = document.getElementById("canvas2");
var ctx = canvas.getContext("2d");
var w = ctx.canvas.width;
var h = ctx.canvas.height;
var num = 6;
var angle = Math.PI * 2 / num;
var x0 = w / 2;
var y0 = h / 2;
var getColor = function() {
//去掉颜色一样的,重复的。
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return 'rgb(' + r + ',' + g + ',' + b + ')';
}
// var startAngle = 0;
for(var i = 0; i < num; i++) {
var startAngle = i * angle;
var endAngle = (i + 1) * angle;
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.arc(x0, y0, 150, startAngle, endAngle);
ctx.fillStyle = getColor();
ctx.fill();
}
</script>-->
<script type="text/javascript">
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.lineWidth = 100;
for(var i = 0; i < 255; i++) {
ctx.beginPath();
ctx.moveTo(90 + i, 100);
ctx.lineTo(90 + i - 1, 100);
ctx.strokeStyle = 'rgb(' + i + ',' + i + ',' + i + ')';
ctx.strokeStyle = 'rgb(' + 200 + ',' + 210 + ',' + i + ')';
ctx.stroke();
}
图片的加载
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var Image = new Image();
/*
* 图片定位点的大小,截取的大小,在画布的大小,图片的大小
*/
Image.onload = function() {
ctx.drawImage(Image,100,100,400,400,200,200,100,100);
}
Image.src ="img/1.jpg";