1.使用canvas画直线
1.首先获取canvas标签
var canvas=document.getElementById('canvas')
2.获取上下文对象
var ctx=canvas.getContext('2d')
3.开启一条路径
ctx.beginPath()
4.确定起始点
ctx.moveTo(100,100)
5.到哪去，结束点
ctx.lineTo(200,200)
6.上色
ctx.strokeStyle='green' //设置颜色
ctx.lineWidth=5;//设置线宽
ctx.stroke()
7.关闭路径
ctx.closePath()
直线连用
我们可以封装重复代码
function fn(x1,y1,x2,y2,color,width){
ctx.beginPath()
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.strokeStyle=color;
ctx.lineWidth=width
ctx.stroke()
}
每次使用只需调用fn()!!!
也可画虚线例如
for(var i=0;i<30;i++){
fn(100+10*i,100,105+10*i,100,'red',2)
}
2. 画矩形
ctx.fillRect(x,y,width,height);
随机统计图
随机统计图
for (let index = 0; index < 6; index++) {
var height = Math.random() * 280 + 10
ctx.fillStyle = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16)//随机数*16进制再变成一个16进制
ctx.fillRect(120 + 40 * index, 400 - height, 20, height);
}
随机五颜六色的小鸡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<canvas id="can" width="500" height="500"></canvas>
</body>
<script>
var can = document.querySelector("#can")
var ctx = can.getContext('2d')
function fn(x1, y1, x2, y2, width) {
ctx.beginPath()
ctx.moveTo(x1, y1)
ctx.lineTo(x2, y2)
ctx.strokeStyle = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16) //设置颜色
ctx.lineWidth = width || 3;//设置线宽
ctx.stroke()
}
fn(100, 100, 340, 100)
fn(340, 100, 340, 340,)
fn(340, 340, 100, 340)
fn(100, 340, 100, 100,)
ctx.beginPath()
ctx.moveTo(100, 100)
ctx.lineTo(70, 40)
ctx.lineTo(110, 60)
ctx.lineTo(150, 30)
ctx.lineTo(170, 50)
ctx.lineTo(210, 30)
ctx.lineTo(190, 100)
ctx.strokeStyle = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16) //设置颜色
ctx.lineWidth = 3;//设置线宽
ctx.stroke()
ctx.beginPath()
ctx.moveTo(220, 220)
ctx.lineTo(280, 180)
ctx.lineTo(270, 210)
ctx.lineTo(270, 210)
ctx.lineTo(310, 230)
ctx.lineTo(280, 260)
ctx.lineTo(250, 250)
ctx.strokeStyle = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16) //设置颜色
ctx.lineWidth = 3;//设置线宽
ctx.stroke()
ctx.beginPath()
ctx.moveTo(100, 150)
ctx.lineTo(50, 170)
ctx.lineTo(100, 190)
ctx.lineTo(50, 210)
ctx.lineTo(100, 230)
ctx.lineTo(30, 290)
ctx.lineTo(100, 290)
ctx.strokeStyle = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16) //设置颜色
ctx.lineWidth = 3;//设置线宽
ctx.stroke()
ctx.beginPath()
ctx.moveTo(160, 340)
ctx.lineTo(140, 390)
ctx.lineTo(130, 405)
ctx.lineTo(140, 390)
ctx.lineTo(110, 400)
ctx.lineTo(140, 390)
ctx.lineTo(160, 400)
ctx.lineTo(140, 390)
ctx.lineTo(160, 340)
ctx.lineTo(260, 340)
ctx.lineTo(280, 390)
ctx.lineTo(270, 405)
ctx.lineTo(280, 390)
ctx.lineTo(250, 400)
ctx.lineTo(280, 390)
ctx.lineTo(300, 400)
ctx.strokeStyle = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16) //设置颜色
ctx.lineWidth = 3;//设置线宽
ctx.stroke()
// for (let index = 0; index < 4; index++) {
// fn(100, 100, 340, 100)
// }
ctx.beginPath()
ctx.arc(160, 160, 30, 0, Math.PI * 2, false)
ctx.stroke()
ctx.beginPath()
ctx.arc(165, 165, 10, 0, Math.PI * 2, false)
ctx.stroke()
ctx.fill();
</script>
</html>
3. 清除画布
clearRect(x,y,width,height);//清除画布
4.画圆
arc(x,y,radius,startAngle,endAngle,counterclockwise)
x,y 描述弧的原形的圆心的坐标
radius 描述的圆形的半径
startAngle,endAngle
沿着圆指定弧的开始点与结束点的一个角度。这个角度用弧度来衡量。
顺时针还是逆时针
时钟小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 500px;
margin: 100px auto;
border-radius: 15px;
background: #ccc;
padding: 50px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<canvas id="view" width="400px" height="400px"></canvas>
</div>
</body>
<script>
var view = document.querySelector("#view")
var c = view.getContext('2d')
var w = h = 400 //
var x = y = 200
var r = 180 //时钟半径
var r_hour = 60 //时钟长度
var r_minute = 120 // 分针长度
var r_second = 140 //秒针长度
var r_text = 140 //文字半径
var r_square = 165 //刻度
var r_circle = 10 //小圆点
var deg = 2 * Math.PI //圆周
c.translate(w / 2, h / 2); //中心点
function fn() {
Circle(0, 0, r, '#fff') //圆盘
Circle(0, 0, r_circle, '#000', 2) //圆心
var date = new Date()
var hour = date.getHours() * (deg / 12) - deg / 4
var miunte = date.getMinutes() * (deg / 60) - deg / 4
var second = date.getSeconds() * (deg / 60) - deg / 4
Line(0, 0, r_hour * Math.cos(hour), r_hour * Math.sin(hour), '#000', 10) //时分秒针
Line(0, 0, r_minute * Math.cos(miunte), r_minute * Math.sin(miunte), '#000', 5)
Line(0, 0, r_second * Math.cos(second), r_second * Math.sin(second), '#f00', 2)
for (let i = 1; i <= 12; i++) { //数字
var k = ((Math.PI * 2) / 12) * i - Math.PI / 2
var x = r_text * Math.cos(k)
var y = r_text * Math.sin(k)
Text(i, x, y)
}
for (let i = 1; i <= 60; i++) { //刻度
var k = ((Math.PI * 2) / 60) * i - Math.PI / 2
var x1 = r * Math.cos(k)
var y1 = r * Math.sin(k)
if (i % 5 == 0) {
var x2 = r_square * Math.cos(k)
var y2 = r_square * Math.sin(k)
Line(x1, y1, x2, y2, '#999', 3)
} else {
var x2 = (r_square + 3) * Math.cos(k)
var y2 = (r_square + 3) * Math.sin(k)
Line(x1, y1, x2, y2, '#999', 2)
}
}
}
setInterval(() => {
fn()
}, 1000);
fn()
function Text(text, x, y) {
c.font = 'bold 26px 华文彩云'
c.fillStyle = '#000';
c.textAlign = 'center ';
c.textBaseline = 'middle ';
c.fillText(text, x, y)
}
function Line(x1, y1, x2, y2, color, width) {
c.beginPath()
c.moveTo(x1, y1)
c.lineTo(x2, y2)
c.strokeStyle = color
c.lineWidth = width
c.lineCap = 'round' //变圆
c.stroke()
c.closePath()
}
function Circle(x, y, r, color) {
c.beginPath()
c.arc(x, y, r, 0, Math.PI * 2)
c.fillStyle = color
c.fill()
c.closePath()
}
</script>
</html>
无规则运动小球
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#cont {
display: block;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<canvas id="cont" width="500" height="500"></canvas>
</body>
<script>
var canvas = document.querySelector("#cont")
var ctx = canvas.getContext('2d')
var w = h = 500
function r(num) {
return Math.random() * num //0-num范围随机数
}
function Ball() { // 构造函数
this.x = r(5) + 60 //x坐标
this.y = r(3) + 60 //y坐标
this.r = r(50) + 10 //半径
this.color = '#' + parseInt(Math.random() * 0xFFFFFF).toString(16) //颜色
this.xSpeed = r(3) + 2 //x轴速度
this.ySpeed = r(3) + 1 //y轴速度
}
//显示小球
Ball.prototype.show = function () {
this.run() //让小球运动 ----注意--调用一次动一次
ctx.beginPath(); //开始画
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); //创建小球
ctx.fillStyle = this.color //颜色
ctx.fill() //进行填充
}
Ball.prototype.run = function () { //小球运动
if (this.x - this.r <= 0 || this.x + this.r >= w) {
//如果到最左边或者最右边 取反
this.xSpeed = - this.xSpeed //速度取反
}
this.x = this.x + this.xSpeed //改变位置
if (this.y - this.r <= 0 || this.y + this.r >= h) {
this.ySpeed = -this.ySpeed //速度取反
}
this.y = this.y + this.ySpeed//改变位置
}
var ballArr = [] //为了拿到每一个球
for (let i = 0; i < 10; i++) {
var ball = new Ball() //创建一个
ballArr.push(ball) //添加一个
}
setInterval(() => {
ctx.clearRect(0, 0, w, h);//清除画布
for (let i = 0; i < ballArr.length; i++) {
var ball = ballArr[i]
ball.show()
}
}, 5)
</script>
</html>
5. 画文字
fillText()方法在画布上绘制填色的文本，默认黑色
fillStyle()填充颜色
fillText(text,x,y,maxWidth)文本，x坐标，y坐标，最大宽
strokeText()空心文字（描边文字）
strokeStyle()描边颜色
createLinearGradient()创建线性的渐变对象，可用于填充矩形，圆形，线条，文本等。使用该对象作为StrokeStyle或fillStyle属性的值
使用 addColorStop（）方法规定不同的颜色以及在gradient对象的何处定位颜色
JS语法: context.createLinearGradient(x0,y0,x1,y1)
//x0 渐变开始的x坐标 x1渐变结束的x坐标
var gradient=c.createLinearGradient(0,0,canvas,width,0)
gradient.addColorStop('0','yellow')
gradient.addColorStop('0.5','red')
gradient.addColorStop('1.0','blue')
c.strokeStyle=gradient //应用渐变
font属性与cssfont属性相同
textAilgin 属性根据锚点 设置对齐方式
默认 starrt end最后一个字靠近中线 left最左字靠中线 center居中 right最后一个字靠近中线
textBaseline 垂直对齐方式
6.图片
getImageData()
返回ImageData对象,返回像素数据
putImageData(imgData,x,y,dirtyX,dirtyWidth,dirtyHeight)
释放获取到的像素数据到页面
参数一要放回画布的ImggeData对象
参数二 ImggeData对象左上角的x坐标
参数三 ImggeData对象左上角的y坐标
dirtyX 放的位置 可选
dirtyWidth 宽度 可选
1847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
