Html5中的Canvas的学习笔记!

今天自己偷偷去W3c学了一下canvas的基础知识,准确的说是复习,以往也学过好多次,但长期不使用也忘了,所以这次写个笔记,便于后期使用!

html代码:

<canvas id="myCanvas"></canvas>

使用说明,canvas是js的基础上的知识,因此canvas的代码都要写到js的<script></script>里面,而且最好放到加载完成后加载,不然浏览器就会报错!

第一步:js获取画布

var c= document.getElementById("myCanvas");//获取画布

第二步:getContext定义画布类型2d/3d

var ctx = c.getContext("2d");//画布类型2d/3d

第三步:写各种需要的canvas的代码

例如1:fillStyle填充背景色;

ctx.fillStyle = "#0000"; //填充类型颜色(color)
ctx.fillRect(0,0,500,300);//填充区域

例如2:fillStyle填充渐变色;createLinearGradient()创建渐变及位置及角度,addColorStop(渐变百分比)

var jianbian=ctx.createLinearGradient(0,0,c.width,c.height);//创建渐变类型
jianbian.addColorStop(0,"red");//渐变分割点(0-1)之间
jianbian.addColorStop(0.3,"white");
jianbian.addColorStop(1,"blue");
ctx.fillStyle = jianbian;//填充类型渐变(gradient)、绘图(pattern)*/
ctx.fillRect(0,0,500,300);//填充区域

例如3:createPattern图片填充

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");//填充类型绘图(pattern),image可以是图片,视频,其他画布*/

注意:1.fillStyle可以用来填充颜色(color)、绘图(pattern)、渐变(gradient)

         2.必须要设置填充区域 fillRect(x1,y1,x2,y2),起点终点的位置

例如4:用ink的方法画直线

ctx.moveTo(0,0);//直线开始用moveTo
ctx.lineTo(c.width,c.height);//直线结束用lineTo
ctx.stroke();//最后用ink的方法stroke画直线

例如5:fillText写,strokeText描边字体

 ctx.font="25px 微软雅黑";
 ctx.fillText("七娃设计",10,50);
 ctx.strokeText("QUX",50,80);

例如6:arc()画圆路径

ctx.beginPath();  //告诉画布清除画布,我要开始画画了
ctx.arc(100,80,40,0,2*Math.PI); //利用arc(x,y,r,起点,结束点,布尔值-false逆时针;ture顺时针)
ctx.stroke(); //描边才能看见 */

例如7:drawImage将图片写入到画布中

var pic = document.getElementById("pic");//html必须有这个图片
ctx.drawImage(pic,10,10);//写入图片和位置

…后续补充中

赞(0) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » Html5中的Canvas的学习笔记!
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏