HTML5 Canvas画图实例用法汇总

HTML5 Canvas是一个基于web的图形绘制API，可以在HTML页面上绘制出各种形状及图形，同时支持多种特效和动画效果。下面为您详细介绍其画图实例的使用方法。

1. 在Canvas上绘制线条

使用Canvas的绘制API绘制线条，可以创建任意角度和长度的线条。以下代码演示如何在Canvas上创建一条黑色的直线：

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.moveTo(0,0);  //线条起始位置
ctx.lineTo(200,100);  //线条结束位置
ctx.stroke();  //绘制线条

2. 在Canvas上绘制矩形

使用Canvas的绘制API绘制矩形，可以创建纯色矩形、边框矩形等。以下代码演示如何在Canvas上创建一个填充色为红色的矩形：

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.fillStyle="red";  //填充色
ctx.fillRect(0,0,100,100);  //矩形的左上角坐标及长宽

3. 在Canvas上绘制圆形

使用Canvas的绘制API绘制圆形，可以创建纯色圆形、圆形边框等。以下代码演示如何在Canvas上创建一个填充色为蓝色的圆形：

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);  //圆的中心点、半径、起始角度、结束角度
ctx.fillStyle="blue";  //填充色
ctx.fill();  //填充圆形

4. 在Canvas上绘制图片

使用Canvas的绘制API绘制图片，可以在Canvas中展示各种本地或远程图片资源。以下代码演示如何在Canvas上绘制一张图片：

var canvas=document.getElementById("myCanvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.src="image.jpg";  //图片资源路径
img.onload=function(){
    ctx.drawImage(img,0,0);  //绘制图片
}

以上是HTML5 Canvas画图实例用法汇总，Canvas还有许多其他画图方法，我们可以根据需求在开发中灵活运用。