首页 > 代码库 > 初学canvas

初学canvas

2024-08-14 19:45:00   220人阅读

浏览器支持:除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 = linearGradientrecontext.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();    }}

 

初学canvas


联系
我们