工作学习日(第一周)[2day]---很牛的canvas
1.canvas创建的就是一个画布,这个画布里面的内容其实是靠js来实现的
2.什么是canvas
3.canvas在网页中是一个矩形框
绘制形状
我们可以在Canvas上绘制各种形状。在绘制前,我们需要先了解一下Canvas的坐标系统:
<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
4.使用canvas的步骤
(1)找到canvas元素
(2)使用getContext("2d")对象是内建的 HTML5 对象,相当于画笔
(3)设定画笔的起始位置(即创建路径),一般有moveTo(x,y)方法来设置
(4)设置画法和画笔结束的位置
(5)使用stroke(); 进行绘制
5.实例
(1)画线
(2)在canvas中绘制圆形, 我们将使用以下的方法:
arc(x,y,r,start,stop)
eg:ctx.arc(95,50,40,0,2*Math.PI);(PI就是180°)
getContext
方法指定参数2d
,表示该canvas
节点用于生成2D图案(即平面图案)。如果参数是webgl
,就表示用于生成3D图像(即立体图案)(3)绘制文本
使用 canvas 绘制文本,重要的属性和方法如下:
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
(4)创建渐变色
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变:
- createLinearGradient(x,y,x1,y1) - 创建线条渐变
- createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象,必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.
使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线。
a.创建线条渐变
b.创建一个径向/圆渐变
c.在画布上添加图片
把一幅图像放置到画布上, 使用以下方法:
- drawImage(image,x,y)
6.canvas画布内的内容如果想随着屏幕的分辨率来改变,一般的步骤为:
a:将canvas的宽和高设置为百分比的形式,canvas的宽和高要依赖于父元素,从父元素的div,找到body,再找到html;
b:设置一个参数来接收窗口变化的次数,窗口每次变化时,可以画布需要清空,再开始重绘;