canvas中级部分-用这支神奇的笔绘制文字、边框、渐变、游戏背景

一、线条样式（了解）

1. 交点样式

   pen.lineJoin="miter(默认的)|round(圆角)|bevel（斜角）"

2. 端点样式

   pen.lineCap="butt(默认值)|round(圆角)|square（方形）"

二、边框样式+虚线间距

等价于CSS的border样式：border: 1px solid|dashed|dotted red;

border-width ===  lineWidth
border-color ===  strokeStyle
border-style ===  setLineDash
///1、 边框样式
pen.setLineDash([虚线长度，虚线间隔]); //[] 数组
比如：
pen.setLineDash([5,5]);
//2、边框起始偏移量（虚线间距）
作用：用来规定边框从什么位置开始
pen.lineDashOffset=5;
可以为负数：往右偏移

三、绘制文本

在canvas中写字。

1. 空心字

   pen.strokeText(text, x, y [, maxWidth])
   //写法：
   pen.strokeText(text, x, y) ;//简写
   pen.strokeText(text, x, y,maxWidth)//全写
   //参数说明：
   1. 内容
   2. x,y在哪里写
   3. maxWidth规定文字显示的范围大小

2. 实心字

   pen.fillText(text, x, y [, maxWidth])
   //语法同空心字

3. 字体样式

   pen.font="30px 微软雅黑";
   和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。

四、绘制渐变色-线性渐变

渐变色也是颜色。只是有多种颜色混合而成。

1. 渐变容器

   var grd=pen.createLinearGradient(x0,y0,x1,y1);
   //比如：
   var grd=ctx.createLinearGradient(0,0,100,100);
   //参数说明：
   x0,y0表示起点（第一个坐标点）
   x1,y1表示第二个坐标点（终点）

2. 添加色标

   grd.addColorStop(位置,颜色);
   //比如：
   grd.addColorStop(0%,red)
   grd.addColorStop(50%,green)
   //参数说明：
   1. 位置：表示0-1（0表示0%，1表示100%）
   2. 颜色，渐变的颜色

3. 使用。当做颜色来使用

   pen.fillStyle=grd; //填充渐变
   pen.strokeStyle=grd;//描边颜色

五、绘制图片（处理图片）

1. 导入图片（图片来源）

   a. 获取img标签
   <img src='url'>
   var img=document.getElementById('img'); 
   
   b. 创建一个图片标签(建议)
   //
   var oimg=document.createElement('img');
   oimg.src='url';

2. 调用绘制图片的方法进行绘制

   //1、最简单的写法（参数多少的问题）
   pen.drawImage(图片对象,x,y)
   //2、中级写法（较多的）
   pen.drawImage(图片对象,x,y,w,h)
   参数说明：
   1.x,y表示图片位置
   2.w,h表示图片大小
   //3、最全的写法（可以裁剪图片）
   pen.drawImage(图片对象,x0,y0,w0,h0,x1,y1,w1,h1)
   参数说明
   1.x0,y0,w0,h0 表示原图裁剪的位置和大小
   2.x1,y1,w1,h1 表示要放在画布的哪个位置和大小（同中级用法）
   

相关单词

1. lineJoin
2. lineCap
3. setLineDash
4. lineDashOffset
5. strokeText
6. fillText
7. createLinearGradient
8. addColorStop
9. drawImage

此资源下载链接已被无情的隐藏，请输入验证码解锁：

验证码

确定

请关注本站公众号回复“验证码”，获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号