浏览器支持:除ie8及以下其它都支持
canvas属性:height width
本身没有绘图能力,必须使用脚本来完成
getContext()方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性,传入"2d"可以取得2D上下文对象,绘制文本、线条、矩形、圆形等等;
1.绘制无填充矩形
1.1strokeStyle 矩形边框颜色
1.2strokeRect 绘制无填充矩形 前两个代表矩形坐标,后两个为矩形宽高
<canvas id="drawing" width="200" height="200"></canvas> var drawing = document.getElementById(‘drawing‘);//确定是否支持canvas元素 if(drawing.getContext){ var context = drawing.getContext(‘2d‘); } //描边 var context = drawing.getContext(‘2d‘); context.strokeStyle = "red"; context.strokeRect(0,0,200,200);
2.绘制边框渐变矩形
2.1creatLinearGradient()线性渐变 接收4个参数起点的坐标xy,终点的坐标xy
2.2addColorStop()方法来指定色标. 接收2个参数,色标位置(一个0(开始的颜色)到1(结束的颜色之间的数字))和CSS颜色值
参数 | 描述 |
---|---|
stop | 介于 0.0 与 1.0 之间的值,表示渐变中开始与结束之间的位置。 |
color | 在结束位置显示的 CSS 颜色值 |
var linearGradient = recontext.createLinearGradient(0,0,0,200); linearGradient.addColorStop(0,‘#aaf‘); linearGradient.addColorStop(0.5,‘#faa‘); recontext.strokeStyle = linearGradient recontext.lineWidth = 5; //设置或返回当前的线条宽度 recontext.strokeRect(0,0,150,150);
3.径向渐变
3.1createRadialGradient()径向渐变 接收6个参数,前三个指定起点园的圆心(xy)及半径,后三个指定终点圆的圆心(xy)及半径
3.2fillRact表示在画布上绘制可填充矩形,从左上角开始(0,0)
3.3fillStyle
var radialGradient = context.createRadialGradient(100,100,0,100,100,100); radialGradient.addColorStop(0,‘yellow‘); radialGradient.addColorStop(0.5,‘#aaf‘); radialGradient.addColorStop(1,‘pink‘); context.fillStyle = radialGradient;//设置或返回用于填充绘画的颜色、渐变或模式 context.fillRect(0,0,200,200)
4渐变文字
4.1strokeText()在画布上绘制文本(无填充)
var linearGradient = text.createLinearGradient(0,0,100,100); linearGradient.addColorStop(0,‘yellow‘); linearGradient.addColorStop(0.5,‘green‘); linearGradient.addColorStop(1,‘pink‘); text.strokeStyle = linearGradient; text.font = "30px/50px arial"; text.strokeText("杜小雨",80,60)
5.模式
5.1createPattern() 方法在指定的方向内重复指定的元素。context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
参数 | 描述 |
---|---|
image | 规定要使用的图片、画布或视频元素。 |
repeat | 默认。该模式在水平和垂直方向重复。 |
repeat-x | 该模式只在水平方向重复。 |
repeat-y | 该模式只在垂直方向重复。 |
no-repeat | 该模式只显示一次(不重复)。 |
5.2rect()方法创建矩形。
5.3clearRect()在给定的矩形内清除指定的像素 4个参数,x,y坐标,以及要清除空间的长宽
html
<img src="1.jpg" id="img"> <canvas id="repeat-img" width="200" height="200"></canvas> <button onclick="draw(‘no-repeat‘)">No-repeat</button> <button onclick="draw(‘repeat‘)">repeat</button>
js
draw =function (imgdirection){ var drawimg = document.getElementById("repeat-img"); var img = document.getElementById("img"); if(drawimg.getContext){ var retext = drawimg.getContext("2d"); retext.clearRect(0,0,drawimg.width,drawimg.height); var pat = retext.createPattern(img,imgdirection); retext.rect(0,0,200,200); retext.fillStyle = pat; retext.fill(); } }
时间: 2024-10-03 07:51:06