canvas 画布

1、canvas 是H5 新加入的标签 用来在页面中绘制图形 一般称之为画布。
2、canvas的宽高要以属性的形式设置,而不是css;
3、canvas 本身并不具备图形绘制能力 一切都是由canvas 的内置的 context对象来完成。
获取canvas标签

var cvs=document.getElementById("cvs");

getContext(参数) 来获取context对象

var cas=cvs.getContext("2d");

4、canvas 提供了两种绘制方式

① fill() 填充
② stroke() 绘制边框

5、绘制一条线段的过程
   var cvs = document.querySelector("canvas");
   var cxt = cvs.getContext(“2d");
   cxt.beginPath();  //开始一条路径
   cxt.moveTo(10,100);  //线段起始点
   cxt.lineTo(200,100);  //线段结束点
   cxt.stroke();  //进行绘制
   cxt.closePath();  //结束一条路径
设置笔簇的宽度 ctx.lineWidth=5;
设置圆角 cvs.lineCap = “round”

but (平,默认) round(圆角)square(方角)

设置笔簇的颜色cxt.strokeStyle = "pink";

还支持 rgb rgba
十六进制等颜色表示形式

清除一个矩形区域的内容

ctx.clearRect(0,0,cvs.width,cvs.height)

创建并绘制矩形的两种方法


cxt.rect(10,10,100,100); //创建一个矩形
ctx.stroke(); //绘制边框

ctx.strokeRect(x,y,w,h); //创建并直接绘制一个矩形

绘制弧形
ctx.arc(x,y,r,star,end,n) //绘制一段弧
ctx.stroke();

//x 圆心的x坐标
//y 圆心的y坐标
//r 半径
//star 起始角 以弧度计算(弧的圆心的三点钟位置是0度)
//end 结束角
//n 是否逆时针 true:逆时针 false:顺时针(默认)

fill填充

① 填充矩形区域

cxt.beginPath();
cxt.rect(20,20,100,100);
cxt.fill(); //填充创建的矩形区域
cxt.closePath();
②
ctx.fillRect(20,20,100,100);
填充 创建的一个圆
cxt.beginPath();
cxt.arc(150,150,100,0,2 * Math.PI,false);
cxt.fill(); //
cxt.closePath();
ctx.fillStyle = "pink"; 设置颜色
线性渐变
ctx.beginPath();
//创建一个渐变对象前两个参数为起始位置的点后两个参数为结束位置的点
var lg = ctx.createLinearGradient(0,100,300,0);
//给渐变添加颜色 第一个值为颜色的起始位置第二个为添加的颜色值
lg.addColorStop(0,'red');
lg.addColorStop(1,"blue");
ctx.fillStyle = lg;//将填充的颜色设置成渐变
ctx.fillRect(0,100,300,100);
ctx.closePath();
径向渐变
ctx.beginPath();
//创建一个径向渐变对象 起始圆心坐标 起始半径
//结束圆心坐标 结束半径
var rg = ctx.createRadialGradient(150,150,50,150,150,100);
rg.addColorStop(0,'red');
rg.addColorStop(1,"blue");
ctx.fillStyle = rg;
ctx.arc(150,150,100,2 * Math.PI,false);
ctx.fill();
ctx.closePath();
创建图片的过程
//ctx.drawImage(Image,sx,sy,sw,sh,dx,dy,dw,dh)
//Image:就是dom里面的真实图片
//sx:图片左上顶点的x坐标
//sy:图片左上顶点的y坐标
//sw:矩形区域的宽度 去截取图片的宽
//sh:矩形区域的高度 去截取图片的高
//dx:画在canvas上面的x坐标
//dy:画在canvas上面的y坐标
//dw:画出来的宽度
//dh:画出来的高度
// sx,sy,sw,sh:是截取图片的过程
// dx,dy,dw,dh:把截取出来的图片放到canvas里面的过程
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,561评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,218评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,162评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,470评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,550评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,806评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,951评论 3 407
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,712评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,166评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,510评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,643评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,306评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,930评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,745评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,983评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,351评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,509评论 2 348

推荐阅读更多精彩内容

  • 一、简介 HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片...
    destiny0904阅读 10,521评论 1 4
  • 一、什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像 画布是...
    EndEvent阅读 684评论 0 1
  • canvas 画布 标签: web前端 直接上代码叨叨 注意 : canvas的宽高只能在标签上设置,千万不要在c...
    yonglei_shang阅读 798评论 0 1
  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,674评论 2 32
  • 是html5新增的画布元素,为了客户端矢量图形而设计的,它自己没有行为(仅仅是一个画图的容器),但是定义了一个 A...
    你期待的花开阅读 2,109评论 0 7