HTML5 Canvas 简介

作者：管理员

发布时间：2021/4/15 17:45:08

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=4460

　　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>


　　执行一下






关键字：jquery