canvas 重要属性 1.fillStyle&fillRect
!!! fillStyle要写在fillRect之前
属性设置或返回用于填充绘画的颜色、渐变或模式。yang.fillRect(20,20,150,100);//(x,y,width,height)
例子:
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle='black';
context.fillRect(20,20,150,100);//(x,y,width,height)
// 2.fillText & strokeText 对应的是 fillStyle & strokeStyle
fillText()// 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
context.fillText(text,x,y,maxWidth);// text:文本 x:文本x轴位于的位置 y:文本y轴位于的位置
// strokeText () 方法在画布上绘制填色的文本。文本的默认颜色是黑色。
context.strokeText (text,x,y,maxWidth);// text:文本 x:文本x轴位于的位置 y:文本y轴位于的位置
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context .fillStyle = '#0099CC';
context .fillText('阳 - 前端',25,130);
context .strokeStyle = '#000';
context .strokeText(''阳 - 前端',25,260);
contextType参数有以下四种:
“2d”:创建一个CanvasRenderingContext2D对象作为2D渲染的上下文。
“webgl”(或"experimental-webgl"):创建一个WebGLRenderingContext对象作为3D渲染的上下文,只在实现了WebGL 2的浏览器上可用,实验性特性。
“webgl2”:创建一个WebGL2RenderingContext对象作为3D渲染的上下文,只在实现了WebGL 3的浏览器上可用。
“bitmaprenderer”:创建一个ImageBitmapRenderingContext,用于将位图渲染到canvas上下文上,实验性特性。
context基本的颜色变化 :addColorStop createLinearGradient
1.addColorStop:这个方法有两个参数,按顺序是梯度,color,梯度的取值要在0-1之间,不然会报错,这个方法决定了完成颜色渐变所需的长度,
从0到1,意味这渐变知道长度结束才完成
2.createLinearGradient:这个是canvas的context的一个方法,参数按顺序是x0, y0, x1, y1,按我的理解其实就是定义了一根线,
颜色沿着这条线的指向进行渐变
代码实练:
<div>
<div>
<p>第一张画布</p>
<canvas
ref="canvasone"
id="canvasid"
style="width:300px;height:300px"
></canvas>
<button @click="canvasonexian('xian')">线性渐变</button>
<button @click="canvasonexian('jing')">径向渐变</button>
</div>
</div>
methods: {
canvasonexian(demoone) {
let myCanvasone = this.$refs.canvasone;
let canvasCon = myCanvasone.getContext("2d");
let onedemo;
if (demoone == "xian") {
onedemo = canvasCon.createLinearGradient(0, 0, 100, 100);
onedemo.addColorStop(0, "yellow");
onedemo.addColorStop(0.1, "green");
onedemo.addColorStop(0.2, "black");
onedemo.addColorStop(0.3, "orange");
onedemo.addColorStop(0.5, "red");
onedemo.addColorStop(0.8, "white");
onedemo.addColorStop(1, "white");
} else if (demoone == "jing") {
onedemo = canvasCon.createLinearGradient(120, 100, 5, 120,70,50);
// canvasCon .fillStyle = '#0099CC';
// canvasCon .fillText('阳 - 前端',25,130);
// canvasCon .strokeStyle = '#000';
// canvasCon .strokeText('阳 - 前端',25,260);
onedemo.addColorStop(0, "yellow");
onedemo.addColorStop(0.5, "red");
onedemo.addColorStop(1, "white");
}
canvasCon.fillStyle = onedemo
canvasCon.fillRect(20,20,100,100)
},
},