canvas的简单使用

最新推荐文章于 2024-02-29 11:34:52 发布

ayao_00

最新推荐文章于 2024-02-29 11:34:52 发布

阅读量241

点赞数

文章标签： canvas vue.js es6

本文链接：https://blog.csdn.net/weixin_47097924/article/details/115010394

版权

canvas常用API
1.获取上下文：getContext(“2d”)
2.设置画布内物体的颜色：context.fillStyle = “red”
3.设置画布内物体的大小：context.fillRect(距离x轴的距离：100, 距离y轴的距离：100, 物体的宽：100, 物体的高：100)
4.设置物体的边框：context.strokeStyle = “yellow”
5.设置物体的边框颜色：context.strokeRect(100, 100, 200, 200)
6.清除画布：context.clearRect（0，0，画布的宽度，画布的高度）

事例1:面向对象

<!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>
</head>
<body>
	<canvas width="500" height="600" id="myCanvas">

	</canvas>
	<script>
        let canvas = document.getElementById("myCanvas")
		// 获取上下文
		let context = canvas.getContext("2d")
		// 构造函数
		function Screen (x, y, w, h, color) {
            this.x = x
			this.y = y
			this.w = w
			this.h = h
			this.color = color
		}
		// 在构造函数上挂载方法
		// 更新
		Screen.prototype.update = function () {
			this.x++
			this.y++
		}
		// 在构造函数上挂载属性
		// 渲染
		Screen.prototype.render = function () {
			context.fillStyle = this.color
			context.fillRect(this.x, this.y, this.w, this.h)
		}
		// 创建构造函数实例
		let box1 = new Screen(100, 100, 100, 50, "yellow")
		let box2 = new Screen(200, 200, 100, 100, "red")
		// 定时器中调用方法
		setInterval(function() {
			// 清除画布
			context.clearRect(0, 0, canvas.width, canvas.height)
			box1.update()
			box1.render()
			box2.update()
			box2.render()
		})
	</script>
</body>
</html>

事例2：

<!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>
</head>
<body>
	<div>
		<button id="btn1">填充一个矩形</button>
	    <button id="btn2">画一个矩形边框</button>
	    <button id="btn3">清除画布内容</button>
	</div>
	<canvas width="500" height="500" id="myCanvas"></canvas>
	<script>
		let btn1 = document.getElementById("btn1")
		let btn2 = document.getElementById("btn2")
		let btn3 = document.getElementById("btn3")
		let canvas = document.getElementById("myCanvas")
		// 获取上下文
		let context = canvas.getContext("2d")
		// 点击事件
		btn1.onclick = function () {
			// 设置画布内物体的颜色
			context.fillStyle = "red"
			// 设置物体的大小
			context.fillRect(100, 100, 100, 200)
		}
		btn2.onclick = function () {
			// 设置边框的颜色
			context.strokeStyle = "blue"
			// 设置边框的大小
			context.strokeRect(200, 200, 300, 300)
		}
		btn3.onclick = function () {
			context.clearRect(0, 0, 500, 500)
		}
	</script>
</body>
</html>

事例3

<!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>
</head>
<body>
    <canvas width="600" height="600" id="myCanvas">

    </canvas>
    <script>
        let canvas = document.getElementById("myCanvas")
        let context = canvas.getContext("2d")
        // 绘制开始路径
        context.beginPath()
        // 移动绘制点
        context.moveTo(100, 100)
        // 描述行进路径
        context.lineTo(200, 200)
        context.lineTo(500, 180)
        context.lineTo(500, 50)
        // 封闭路径
        // context.closePath()
        // 填充
        // context.fillStyle = "yellow"
        // context.fill()
        // 绘制边框
        context.strokeStyle = "red"
        context.stroke()
        // 当填充的时候可以不用封闭，它会自动封闭
    </script>
</body>
</html>

事例4

<!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>
</head>
<body>
    <canvas width="600" height="600" id="myCanvas">

    </canvas>
    <script>
        let canvas = document.getElementById("myCanvas")
        let context = canvas.getContext("2d")
        // 一个圆: 2 * 3.14   2 * Math.PI 数字7
        // context.arc(x轴, y轴, 圆或者圆弧的半径, 圆或者圆弧的起点, 圆或者圆弧的终点, true代表逆时针, false代表顺时针)
        context.arc(300, 300, 200, 0, 3, false)
        // context.arc(200, 200, 100, 2 * Math.PI,false)
        context.strokeStyle = "green"
        context.stroke()
        
    </script>
</body>
</html>

ayao_00

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas的简单使用

canvas常用API1.获取上下文：getContext(“2d”)2.设置画布内物体的颜色：context.fillStyle = “red”3.设置画布内物体的大小：context.fillRect(距离x轴的距离：100, 距离y轴的距离：100, 物体的宽：100, 物体的高：100)4.设置物体的边框：context.strokeStyle = “yellow”5.设置物体的边框颜色：context.strokeRect(100, 100, 200, 200)事例1:面向对象&lt
复制链接

扫一扫