H5画布绘制笑脸
H5画布绘制笑脸
一、绘制三角形
- 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>
在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()绘制图形。
- 绘制图形，填充颜色
//获取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();
二、绘制矩形
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);
三、绘制圆形
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();
四、绘制笑脸
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();
绘制方法，先画外层圆，再画里面的圆弧和小圆。笑脸的各个部分分别绘制，方便控制每个部分的填充颜色。
