章节
问答
课签
笔记
评论
占位
占位

CANVAS概述

Canvas是html5的新标签,看起来很屌的样子其实理解了就不难。Canvas意为画布,简单的来说通过Canvas提供的一些接口方法在这个指定的画布中画出我们想要的图片与执行一系列的动作。

<canvas id="cvs"></canvas>
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');

canvas是画布,getContext就好比是笔,通过ctx可以调用一堆的方式在画布上画图了。在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形。在Canvas中也是如此。

在开始之前我们先拿出画布和画笔:如果需要画一条直线

ctx.moveTo(50,50);
ctx.lineTo(200,200);

2点确定一条线,moveTo与lineTo大概就是这个意思。但是会发现画布上没有预想中的线,什么也没有。因为我们还少了一个步骤.lineTo其实是画的一条“路径”,本身是不可见的。如果要让他显示出来,我们必须对他进行“画”的操作。

用过PS的同学,肯定能知道图形的两种模式,一种是填充,另一种是描边。现在我们已经画了一条线,相当于PS中勾了一条路径,此时给路径描一下边,就能显示出图形了。

ctx.stroke();

总的来说:Canvas绘制的总体的步骤

  • 创建HTML页面,设置画布标签
  • 编写js,获取画布dom对象
  • 通过Canvas标签的Dom对象获取上下文
  • 设置绘制线样式、颜色
  • 绘制矩形,或者填充矩形

 

任务

在代码22行处填入任务代码

绘制一个矩形 context.fillRect(x,y,width,height);

任务:

x= 110

y= 110

w = 100

h = 100

颜色是蓝色

参考:

x 矩形左上角的 x 坐标
y 矩形左上角的 y 坐标
width 矩形的宽度,以像素计
height 矩形的高度,以像素计
?不会了怎么办

    ctx.fillStyle = "blue";
    ctx.fillRect(110, 110, 100, 100);

||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?