cavas 的个人笔记

阅读数:1559 发布时间:2016-07-09 21:29:55

作者:w3zbb 标签: cavas 画图 w3zbb

##简介 cavas是html的绘图标签,cavas本身并没有绘图能力,他只是为js脚本所提供的一个画布,一切绘图都需要js来实现。   ##具体使用方法 在html里面添加一个cavas给它一个ID设置他的宽和高,注意cavas标签的宽和高是没有“px”的

<cavas id="dd" width="500" height="500"></cavas>

比方所画出一个矩形代码如下

var c = document.getElementById("dd");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FF0000";
cxt.fillRect(0,0,150,75);

这里的cxt.fillstyle = "#ff0000"是所填充的颜色cxt.fillRect(0,0,150,75)这里的“fillRect”里面的四个值意思分别是(x,y,width,height);x轴和y轴是以画布左上角为0

绘制圆形代码如下

var c=document.getElementById("dd");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

画布上绘制图片代码如下

var c = document.getElementById("can");
var cxt = c.getContext("2d");
var img = new Image();
img.src = "http://img1.cache.netease.com/f2e/www/index2014/images/bg_sprites_v19.png";
img.onload = function (){  
    cxt.drawImage(img,0,0,150,50,10,10,250,250);
   }  

这里面的cxt.drawImage方法的值分别是{sx,sy,swight,sheight,x,y,wight,height}sx: 可选。开始剪切的 x 坐标位置。sy: 可选。开始剪切的 y 坐标位置。swight: 可选。被剪切图像的宽度。sheight: 可选。被剪切图像的高度。x: 在画布上放置图像的 x 坐标位置。y: 在画布上放置图像的 y 坐标位置。wight: 可选。要使用的图像的宽度。(伸展或缩小图像)height: 可选。要使用的图像的高度。(伸展或缩小图像)

相关文章推荐: