这篇文章主要介绍了HTML5中Canvas的使用方法有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
moveTo（x,y） 定义线条开始坐标
lineTo（x,y） 定义线条结束坐标
使用 stroke（） 方法来绘制线条
使用 beginPath（） 方法来清除当前画布中存在的路径 并且 准备开始绘制新的路径
调用 arc（） 方法，传入相应的参数
使用 stroke（） 方法来绘制线条
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #0D5BB3;">
您的浏览器不支持HTML5 Canvas标签
</canvas>
<script type="text/javascript">
var c=document.getElementById（"myCanvas"）;
var cxt=c.getContext（"2d"）;
cxt.fillStyle="#FF0000";
cxt.beginPath（）;
cxt.arc（80,28,25,0,Math.PI*2,true）;
cxt.closePath（）;
cxt.fill（）;
</script>
执行一下
createLinearGradient（x,y,x1,y1） - 创建线条渐变
createRadialGradient（x,y,r,x1,y1,r1） - 创建一个径向/圆渐变
创建渐变对象（线性还是径向）
使用两种或两种以上的停止颜色来实现颜色渐变效果：addColorStop（）方法指定颜色停止，参数使用坐标来描述，可以是0至1
应用渐变到画布元素中，设置画布上下文对象的 fillStyle或strokeStyle的值为 渐变，然后绘制形状，如矩形，文本，或一条线
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #0D5BB3;">
您的浏览器不支持HTML5 Canvas标签
</canvas>
<script type="text/javascript">
var c=document.getElementById（"myCanvas"）;
var ctx=c.getContext（"2d"）;
// 创建渐变
var grd=ctx.createLinearGradient（0,0,200,0）; //线性
//var grd=ctx.createRadialGradient（75,50,5,90,60,100）; //径向
grd.addColorStop（0,"blue"）;
grd.addColorStop（1,"white"）;
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect（10,10,150,80）;
</script>
执行一下
获取或者创建 图像的dom对象
使用 drawImage 方法实现图像的绘制
<canvas id="myCanvas" width="200" height="180" style="border:1px solid #0D5BB3;">
您的浏览器不支持HTML5 Canvas标签
</canvas>
<img id="img" src="/static/resource/img/logo.png" style="display: none;" />
<script type="text/javascript">
var c=document.getElementById（"myCanvas"）;
var ctx=c.getContext（"2d"）;
//创建图像的dom对象，第一种方法
var img=new Image（）;
img.src="/static/resource/img/logo.png";
//创建图片的dom对象，第二种方法
//var img=document.getElementById（"img"）;
ctx.drawImage（img,0,0）;
</script>
执行一下
使用 font 属性来定义字体
使用 fillText（text,x,y） 在 canvas 上绘制实心的文本
使用 strokeText（text,x,y） 在 canvas 上绘制空心的文本
<canvas id="myCanvas" width="200" height="180" style="border:1px solid #0D5BB3;">
您的浏览器不支持HTML5 Canvas标签
</canvas>
<script type="text/javascript">
var c=document.getElementById（"myCanvas"）;
var ctx=c.getContext（"2d"）;
ctx.font="30px 微软雅黑";
ctx.fillText（"Hello World",10,50）; //绘制实心文字
//ctx.strokeText（"Hello World",10,50）; //绘制空心文字
</script>
执行一下
感谢你能够认真阅读完这篇文章，希望小编分享的“HTML5中Canvas的使用方法有哪些”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网行业资讯频道，更多相关知识等着你来学习!
