嗨，大家好！今天给大家分享一下，怎么在vscode中给函数名后边加空格，让函数名和（）之间有空格，这里大家要注意的是：Prettier – Code formatter并不能实现这个功能，我们需要借助Vetur来实现，以前小编一直很迷，为什么配置都配置了。我们还是没有效果，其实是用错插件了，我们应该用Vetur.
View Detailssass/scss或是less，都可以看作为一种基于css之上的高级语言，其目的是使得css开发更灵活和更强大，sass的功能比less强大,基本可以说是一种真正的编程语言了，less则相对清晰明了,易于上手,对编译环境要求比较宽松，在实际开发中更倾向于选择less。但如果认真深入scss之后还是建议切换到scss，因为更加强大，更好用。
View DetailsCanvas 对象 实例 绘制一个矩形。请用红色的笔触颜色：
|
1 2 3 4 |
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.strokeStyle="#FF0000"; ctx.strokeRect(20,20,150,100); |
尝试一下 » 浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 strokeStyle 属性。 注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。 定义和用法 strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。 默认值： #000000 JavaScript 语法： context.strokeStyle=color|gradient|pattern; 属性值 值 描述 color 指示绘图笔触颜色的 CSS 颜色值。默认值是 #000000。 gradient 用于填充绘图的渐变对象（线性 或 放射性）。 pattern 用于创建 pattern 笔触的 pattern 对象。 更多实例 实例 绘制一个矩形。使用渐变笔触：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); var gradient=ctx.createLinearGradient(0,0,170,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // Fill with gradient ctx.strokeStyle=gradient; ctx.lineWidth=5; ctx.strokeRect(20,20,150,100); |
尝试一下 » 实例 用一个渐变笔触来写文本 "Big smile!"：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.font="30px Verdana"; // Create gradient var gradient=ctx.createLinearGradient(0,0,c.width,0); gradient.addColorStop("0","magenta"); gradient.addColorStop("0.5","blue"); gradient.addColorStop("1.0","red"); // Fill with gradient ctx.strokeStyle=gradient; ctx.strokeText("Big smile!",10,50); |
尝试一下 » Canvas 对象 from:https://www.runoob.com/jsref/prop-canvas-strokestyle.html
View DetailsCanvas 对象 实例 用宽度为 10 像素的线条来绘制矩形：
|
1 2 3 4 |
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.lineWidth=10; ctx.strokeRect(20,20,80,100); |
尝试一下 » 浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineWidth 属性。 注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。 定义和用法 lineWidth 属性设置或返回当前线条的宽度，以像素计。 默认值： 1 JavaScript 语法： context.lineWidth=number; 属性值 值 描述 number 当前线条的宽度，以像素计。 Canvas 对象 from:https://www.runoob.com/jsref/prop-canvas-linewidth.html
View Details颜色 英文代码 形像颜色 HEX格式 RGB格式 LightPink 浅粉红 #FFB6C1 255,182,193 Pink 粉红 #FFC0CB 255,192,203 Crimson 猩红 #DC143C 220,20,60 LavenderBlush 脸红的淡紫色 #FFF0F5 255,240,245 PaleVioletRed 苍白的紫罗兰红色 #DB7093 219,112,147 HotPink 热情的粉红 #FF69B4 255,105,180 DeepPink 深粉色 #FF1493 255,20,147 MediumVioletRed 适中的紫罗兰红色 #C71585 199,21,133 Orchid 兰花的紫色 #DA70D6 218,112,214 Thistle 蓟 #D8BFD8 216,191,216 plum 李子 #DDA0DD 221,160,221 Violet 紫罗兰 #EE82EE 238,130,238 Magenta 洋红 #FF00FF 255,0,255 Fuchsia 灯笼海棠(紫红色) #FF00FF 255,0,255 DarkMagenta 深洋红色 #8B008B 139,0,139 Purple 紫色 #800080 128,0,128 MediumOrchid 适中的兰花紫 #BA55D3 186,85,211 DarkVoilet 深紫罗兰色 #9400D3 148,0,211 DarkOrchid 深兰花紫 #9932CC 153,50,204 Indigo 靛青 #4B0082 75,0,130 BlueViolet 深紫罗兰的蓝色 #8A2BE2 […]
View Details一、canvas简介 <canvas> 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。 它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mozilla和Firefox)，Opera和Chrome和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。 Canvas是由HTML代码配合高度和宽度属性而定义出的可绘制区域。JavaScript代码可以访问该区域，类似于其他通用的二维API，通过一套完整的绘图函数来动态生成图形。 Mozilla 程序从 Gecko 1.8 (Firefox 1.5)开始支持 <canvas>, Internet Explorer 从IE9开始<canvas> 。Chrome和Opera 9+ 也支持 <canvas>。 二、Canvas基本使用 2.1 <canvas>元素
|
1 |
<canvas id="tutorial" width="300" height="300"></canvas> |
<canvas>看起来和<img>标签一样，只是 <canvas> 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。 如果不给<canvas>设置widht、height属性时，则默认 width为300、height为150,单位都是px。也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用css属性来设置<canvas>的宽高。 ###替换内容 由于某些较老的浏览器（尤其是IE9之前的IE浏览器）或者浏览器不支持HTML元素<canvas>，在这些浏览器上你应该总是能展示替代内容。 支持<canvas>的浏览器会只渲染<canvas>标签，而忽略其中的替代内容。不支持 <canvas> 的浏览器则 会直接渲染替代内容。 用文本替换：
|
1 2 3 |
<canvas> 你的浏览器不支持canvas,请升级你的浏览器 </canvas> |
用 <img> 替换：
|
1 2 3 |
<canvas> <img src="./美女.jpg" alt=""> </canvas> |
结束标签</canvas>不可省 与 <img>元素不同，<canvas>元素需要结束标签(</canvas>)。如果结束标签不存在，则文档的其余部分会被认为是替代内容，将不会显示出来。 2.2 渲染上下文(Thre Rending Context) <canvas>会创建一个固定大小的画布，会公开一个或多个 渲染上下文(画笔)，使用 渲染上下文来绘制和处理要展示的内容。 我们重点研究 2D渲染上下文。 其他的上下文我们暂不研究，比如， WebGL使用了基于OpenGL ES的3D上下文 (“experimental-webgl”) 。
|
1 2 3 |
var canvas = document.getElementById('tutorial'); //获得 2d 上下文对象 var ctx = canvas.getContext('2d'); |
2.3 检测支持性 […]
View Details