本文通过实例展示了如何使用 HTML5 的 Canvas 进行绘图，包括绘制矩形、渐变填充、线条、圆形及文本，并介绍了如何将图片加载到 Canvas 中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Canvas</title>
</head>
<body>
<canvas id="myCanvas" x="100" y="200" width="200" height="100" style="border:1px solid #000000;">
您的的浏览器不支持 HTML5 Canvas 标签。
</canvas>
<script>
//1.找到<canvas>元素
var c=document.getElementById("myCanvas");
//2.创建context对象
var ctx=c.getContext("2d");
//下面两行代码绘制一个红色的矩形
ctx.fillStyle="FF0000";
ctx.fillRect(0,0,150,75);
//创建线条渐变
//创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);//创建一个线性渐变
//var grd=ctx.createRadialGradient(75,50,5,90,60,100);//创建一个径向/圆渐变
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
//下面画一条对角直线
ctx.moveTo(0,0);//moveTo(x,y) 定义线条开始坐标
ctx.lineTo(200,100);//lineTo(x,y) 定义线条结束坐标
ctx.stroke();
//下面回一个圆
ctx.beginPath();
ctx.arc(50,40,10,0,2*Math.PI);//arc(x,y,r,start,stop)
ctx.stroke();
//文本
ctx.font="30px Arial";
ctx.fillText("bei jing",10,40);//fillText(text,x,y) - 在 canvas 上绘制实心的文本
ctx.strokeText("BEI JING",10,80);//strokeText(text,x,y) - 在 canvas 上绘制空心的文本
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Canvas</title>
</head>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="200" height="300"/>
<p>Canvas:</p>
<canvas id="myCanvas" width="200" height="300" style="border:1px solid #000000;">
您的的浏览器不支持 HTML5 Canvas 标签。
</canvas>
<script>
//1.找到<canvas>元素
var c=document.getElementById("myCanvas");
//2.创建context对象
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload=function(){
ctx.drawImage(img,0,0);
}
</script>
</body>
</html>
扫一扫
1750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
