欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

canvas画布

程序员文章站 2022-07-02 16:17:41
画布canvas 1)什么是画布: 就是html中的一个标签:canvas 2)如何使用? 通过JS来使用 3)JS如何与canvas关联起来 (1)通过getContext("2d")方法来给画布配置画笔,使其具备绘画功能; var ctx = canvas.getContext("2d") _创 ......

画布canvas
1)什么是画布:
就是html中的一个标签:canvas
2)如何使用?
通过js来使用
3)js如何与canvas关联起来
(1)通过getcontext("2d")方法来给画布配置画笔,使其具备绘画功能;
var ctx = canvas.getcontext("2d") _创建画笔
(2)通过fillstyle/strokestyle属性来设置画笔的颜色;
fillstyle:设置的是填充体的颜色;
strokestyle:设置的是线条的颜色;
(3)通过具体的绘图方法来实现图形的绘制:
fillrect():用来绘制矩形的;
有四个参数,第一和第二个参数,表示的是下笔的坐标值;第三和第四个参数表示的是所绘制矩形的宽和高;
strokerect():用来绘制矩形边框线的;
参数与fillrect()方法一致;
(4)createlineargradient() 方法创建线性的渐变对象
context.createlineargradient(x0,y0,x1,y1);
第一个值为渐变开始点的x坐标,第二个值为渐变开始点的y坐标,第三个值为渐变结束点的x坐标,第四个值为渐变结束点的y坐标。