• H5画布绘制笑脸

    H5画布绘制笑脸

    一、绘制三角形

    1. canvas绘制三角形
    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>三角形title>
		<style>
			#myCanvas{
				box-shadow: 0 0 5px black;
				margin-top: 50px;
				margin-left: 50px;
			}
		style>
	head>
	<body>
		
		<canvas id="myCanvas" width="500" height="500">
		canvas>
	body>
	<script>
		//获取canvas对象b
		var canvas = document.getElementById("myCanvas");
		//上下文:理解：canvas标签内置画笔
		var ctx = canvas.getContext("2d");//目前仅支持2d画板
		//线段方法
		//1.新建一条路径
		ctx.beginPath();
		//2.设置起点,理解：移动画笔的位置
		ctx.moveTo(50,50);
		//3.设置另一个点坐标
		ctx.lineTo(100,100);
		//设置第三个点
		ctx.lineTo(200,100);
		//ctx.lineTo(50,50);
		//4.0闭合路径（不是必须的方法）:终点和起点关闭。
		ctx.closePath();
		//4.绘制
		ctx.stroke();
	script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    ​ 在body中添加一个canvas元素创建画板，指定宽高度500px、id属性myCanvas用于定位。在style元素中给画板添加样式，box-shadow添加盒子阴影，margin-top、margin-left指定外边距。创建script元素编写js脚本。首先通过id获取画板变量，然后通过getContext(“2d”)方法获取上下文ctx。

    ​ 线段的画法，首先通过ctx.beginPath()方法新建一条路径，然后通过ctx.moveTo(50, 50)设置移动画笔的起点，再通过ctx.lineTo(100, 100)设置另一个点的坐标、ctx.lineTo(200, 100)设置第三个点的坐标，接着通过ctx.closePath()闭合路径，最后使用ctx.stroke()绘制图形。
    在这里插入图片描述

    1. 绘制图形，填充颜色
    //获取canvas对象
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(350, 400);
//填充路径绘制，当使用fill函数绘制时，没有闭合的路径会默认闭合，不需要使用closePath()关闭路径，但是stroke()不会自动闭合
ctx.fill();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这里插入图片描述

    二、绘制矩形

    var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//绘制矩形直接绘制，路径自动创建，前两个起始位置，后两个宽高度
ctx.strokeRect(100, 100, 100, 200);
//绘制一个填充矩形
ctx.fillRect(0, 0, 100, 100);
//清除绘制，清除部分完全透明
ctx.clearRect(50, 50, 40, 40);
//清除画布
ctx.clearRect(0, 0, 100, 100);
//清除整个画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    三、绘制圆形

    var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
//绘制圆形或者圆弧使用arc()函数
//arc(x: Number, y: Number, radius: Number, startAngle: Number, endAngle: Number, anticlockwise: Boolean): none
//绘制一个以x,y为圆心，radius为半径，从startAngle弧度开始到endAngle结束，anticlockwise：绘制方向，布尔值，默认false顺时针
//顺时针画一个圆形
ctx.arc(200, 200, 50, 0, Math.PI*2, false);
//顺时针画半个圆，绘制的起点默认在最右边
ctx.arc(200, 200, 50, 0, Math.PI, false);
//起始位置90度，默认在右边顺时针走90度为起始位置
ctx.arc(200, 200, 50, Math.PI/2, Math.PI, true);
//绘制
ctx.stroke();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    四、绘制笑脸

    var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "green";
ctx.arc(250,250,100,0,Math.PI*2,false);
ctx.fill();

ctx.beginPath();
//设置圆弧颜色为红色
ctx.strokeStyle = "red";
ctx.arc(250,250,70,0,Math.PI,false);
ctx.stroke();

ctx.beginPath();
ctx.fillStyle = "orange";
ctx.arc(220,220,10,0,Math.PI*2,false);
ctx.fill();

ctx.beginPath();
ctx.fillStyle = "orange";
ctx.arc(280,220,10,0,Math.PI*2,false);
ctx.fill();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    ​ 绘制方法，先画外层圆，再画里面的圆弧和小圆。笑脸的各个部分分别绘制，方便控制每个部分的填充颜色。
    在这里插入图片描述

  • 相关阅读:
    BSP Day55
    分布式微服务技术栈-SpringCloud＜Eureka，Ribbon，nacos＞
    PTA-6-42 设计门票（抽象类）
    Spring框架【尚硅谷】
    大数据技术之Shell学习笔记（常用）
    【java学习—八】==操作符与equals方法（2）
    上海亚商投顾：沪指再创年内新低 贵州茅台等权重股集体调整
    【无标题】Linux VMware安装centos之后设置静态IP
    FHE Circuit Privacy
    5+m6A+预后模型+WGCNA，简单又高效，学习下这篇思路吧
  • 原文地址：https://blog.csdn.net/dolly_baby/article/details/126648570