初学canvas

Posted 2020-08-10

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