初学canvas

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初学canvas相关的知识,希望对你有一定的参考价值。

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

 

以上是关于初学canvas的主要内容,如果未能解决你的问题,请参考以下文章

canvas篇--初学canvas案例---canvas签名

自己定义View时,用到Paint Canvas的一些温故,简单的帧动画(动画一 ,&quot;掏粪男孩Gif&quot;顺便再提提onWindowFocusChanged)(代码片段

Canavs初学

初学canvas

PHP必用代码片段

小程序各种功能代码片段整理---持续更新