Mardanjan
commented
4 years ago <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas{
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas">
您的浏览器不支持canvas
<!-- 1.canvas 宽高设置问题
2.如果使用style设置宽高，等同于把画布进行缩放
3.如果想给canvas设置宽高，直接在标签中的属性里调
-->
</canvas>
</body>
<script>
function draw() {
var canvas = document.querySelector('#canvas')
canvas.width = 600
canvas.height = 400
var c = canvas.getContext('2d')
c.beginPath();
c.moveTo(50, 50);
// canshu 1,2 控制点1坐标， 参数3，4控制点2坐标， 参数5圆弧半径
c.arcTo(200, 50, 200, 200, 100)
c.lineTo(200, 200)
c.stroke()
c.beginPath()
c.rect(50, 50, 10, 10)
c.rect(200, 50, 10, 10)
c.rect(200, 200, 10, 10)
c.fill()
}
// draw()
function drawBeisaier() {
var canvas = document.querySelector('#canvas')
canvas.width = 600
canvas.height = 400
var c = canvas.getContext('2d')
c.beginPath()
c.moveTo(10, 200) // 起始点
var cp1x = 40, cp1y = 100; // 控制点
var x = 200, y = 200 //结束点
// 绘制二次贝塞尔曲线
c.quadraticCurveTo(cp1x, cp1y, x, y)
c.stroke()
c.beginPath()
c.rect(10, 200, 10, 10)
c.rect(cp1x, cp1y, 10, 10)
c.rect(x, y, 10, 10)
c.fill()
}
// drawBeisaier()
function drawRainBow() {
var canvas = document.querySelector('#canvas')
canvas.width = 600
canvas.height = 480
var c = canvas.getContext('2d')
for (var i = 0; i < 10; i++) {
for (var j = 0; j < 8; j++) {
c.fillStyle = 'rgb(' + Math.floor(255 - 43.2 * i) + ',' +
Math.floor(255- 42.5 * j) + ',0';
c.fillRect( i * 60, j * 60, 60, 60)
}
}
}
// drawRainBow()
function drawRainBow2 () {
var canvas = document.querySelector('#canvas')
var c = canvas.getContext('2d')
for(let i = 0; i<6 ; i++) {
for (let j = 0; j < 6; j++) {
c.strokeStyle = `rgb(${randomInt(0, 255)}, ${randomInt(0, 255)}, ${randomInt(0, 255)})`;
c.strokeRect(j*50, i*50, 40, 40)
}
}
}
drawRainBow2()
function randomInt (from , to) {
return parseInt(Math.random() * (to - from + 1) + from)
}
setInterval(() => {
drawRainBow2()
}, 1000);
// 获取canvas元素（画布）
// var canvas = document.querySelector('#canvas')
// if (canvas.getContext) {
// // 获取画笔,canva渲染上下文
// var ctx = canvas.getContext('2d')
// 绘制矩形
// for (let i=0; i<200; i += 5) {
// ctx.fillStyle = "rgb(200,0,"+ i + ")";
// ctx.fillRect(i,i,100,50)
// }
// ctx.beginPath();
// ctx.moveTo(50, 50)
// ctx.lineTo(100, 50)
// ctx.lineTo(100, 200)
// ctx.closePath()
// ctx.fill()
// ctx.stroke()
// ctx.beginPath()
// ctx.arc(50, 50, 40, 0, Math.PI / 2, false)
// ctx.stroke()
// ctx.beginPath()
// ctx.arc(150, 50, 40, 0, -Math.PI / 2, true)
// ctx.closePath()
// ctx.stroke()
// ctx.beginPath()
// ctx.arc(50, 150, 40, -Math.PI / 2, Math.PI / 2 , false)
// ctx.fill()
// ctx.beginPath()
// ctx.arc(150, 150, 40, 0, Math.PI, false)
// ctx.fill()
// }else{
// // canvas unsupported code here
// }
</script>
</html>
canvas