canvas 绘画

来源：互联网发布：ubuntu查看分区挂载点编辑：程序博客网时间：2024/05/16 00:39

canvas可以绘制文本、线条、矩形、圆形、贝塞尔曲线

为矩形描边

context.strokeRect(75,100,200,200); 给矩形描边
使用strokeStyle来设置描边的样式
lineWidth 描边的线的宽度
linejoin 来为描边设置圆角
但是是的注意的是这是这些属性必须在context调用strokeRect这个函数之前。

填充矩形

context.fillRect(325,100,200,200); 给矩形填充
strokeStyle 设置填充的颜色的样式
注意事项和上边的相同

canvas中的画图的方法

这里写图片描述

渐变色填充矩形

线性渐变 createLinearGradient();

var canvas=document.getElementById("canvas");//得到一个2D的绘图环境  d必须小写var context=canvas.getContext('2d');var linear=context.createLinearGradient(0,0,canvas.width,0);linear.addColorStop(0,"blue");linear.addColorStop(0.3,"white");linear.addColorStop(0.5,"purple");linear.addColorStop(0.7,"red");linear.addColorStop(1,"yellow");context.fillStyle=linear;context.fillRect(0,0,canvas.width,canvas.height);

放射性渐变

var canvas=document.getElementById("canvas");//得到一个2D的绘图环境  d必须小写var context=canvas.getContext('2d');var linear=context.createRadialGradient(canvas.width/2,canvas.height,10,canvas.width,0,200);linear.addColorStop(0,"blue");linear.addColorStop(0.3,"white");linear.addColorStop(0.5,"purple");linear.addColorStop(0.7,"red");linear.addColorStop(1,"yellow");context.fillStyle=linear;context.fillRect(0,0,canvas.width,canvas.height);

图案填充

createPattern(image,repeatString);
html代码

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <link href="css/styles.css" rel="stylesheet">    <title>Document</title></head><body>     <div id="radios">           <input id="repeatRadio" type="radio" name="patternradio" checked>repeat           <input id="repeatXRadio" type="radio" name="patternradio" >repeat-x           <input id="repeatYRadio" type="radio" name="patternradio" >repeat-y           <input id="noRepeat" type="radio" name="patternradio" >no-repeat     </div>      <canvas id="canvas"width="750" height="500">          不支持canvas      </canvas></body><script src="scripts/test.js"></script></html>

js代码

var canvas=document.getElementById("canvas");//得到一个2D的绘图环境  d必须小写var context=canvas.getContext('2d');var repeat=document.getElementById("repeatRadio");var repeatXRadio=document.getElementById("repeatXRadio");var repeatYRadio=document.getElementById("repeatYRadio");var noRepeat=document.getElementById("noRepeat");var image=new Image();image.src="bull.png";function createPattern(repeatString) {     var pattern=context.createPattern(image,repeatString);    //创建填充的样式     context.clearRect(0,0,canvas.width,canvas.height);    //将创建好的样式应用于  fillStyle      context.fillStyle=pattern;      context.fillRect(0,0,canvas.width,canvas.height);      context.fill();}repeat.onclick=function (e) {    createPattern("repeat");}repeatXRadio.onclick=function (e) {    createPattern("repeat-x");}repeatYRadio.onclick=function (e) {    createPattern("repeat-y");}noRepeat.onclick=function (e) {    createPattern("no-repeat");}

实现了X方向的填充，y方向的填充。整个填充。

canvas设置阴影的效果

var canvas=document.getElementById("canvas");//得到一个2D的绘图环境  d必须小写var context=canvas.getContext('2d');var ERASER_LINE_WIDTH=1,ERSER_SHADOW_STYLE='BLUE',ERASER_STROKE_OFFSET=-5,ERASER_SHADOW_BLUR=20,ERASER_RADIUS=60,ERASER_STROKE_STYLE='rgba(0,0,255,0.6)';function setEraserAttributes() {     context.lineWidth=ERASER_LINE_WIDTH;    context.shadowColor=ERSER_SHADOW_STYLE;    context.shadowOffsetX=ERASER_STROKE_OFFSET;    context.shadowOffsetY=ERASER_STROKE_OFFSET;    context.shadowBlur=ERASER_SHADOW_BLUR;    context.strokeStyle=ERASER_STROKE_STYLE;}

路径和子路径

canvas中只允许由一条路径。我们称其为当前路径，然而这个路径可以有许多个子路径
context.beginPath();这个方法就是创建一个新的路径，清除掉之前的所有的路径。

画线段

moveTo（起始点）,lineTo（终止点）。然后stroke()
通过lineWidth来设置线的宽度
实例：为画布绘制一个网格

var canvas=document.getElementById("canvas");//得到一个2D的绘图环境  d必须小写var context=canvas.getContext('2d');function drawGrid(context,colpr,stepx,stepy) {    context.lineWidth=0.5;      for(var i=stepx+0.5;i<context.canvas.width;i+=stepx){          context.beginPath();          context.moveTo(i,0);          context.lineTo(i,context.canvas.height);          context.stroke();      }    for(var j=stepy+0.5;j<context.canvas.height;j+=stepy){        context.beginPath();        context.moveTo(0,j);        context.lineTo(context.canvas.width,j);        context.stroke();    }}drawGrid(context,"red",20,20)

画虚线

canvas中本身没有画虚线的函数，我们通过扩展CanvasRenderingContext2D的原型来定义画虚线的方法 dashedLineTo

var canvas=document.getElementById("canvas");//得到一个2D的绘图环境  d必须小写var context=canvas.getContext('2d');//得到moveTo在CanvasRenderingContext2D中的原型var moveToFunction=CanvasRenderingContext2D.prototype.moveTo;CanvasRenderingContext2D.prototype.lastMoveToLocation={};CanvasRenderingContext2D.prototype.moveTo=function (x,y) {     moveToFunction.apply(context,[x,y]);    this.lastMoveToLocation.x=x;    this.lastMoveToLocation.y=y;}//x,y为虚线的终点CanvasRenderingContext2D.prototype.dashedLineTo=function (x,y,dashLength) {    //虚线上每两个小点之间的距离      dashLength=dashLength===undefined?5:dashLength;    //获得起始点的位置      var startX=this.lastMoveToLocation.x;      var startY=this.lastMoveToLocation.y;    //把即将要画出的这条线当作是直角三角形中的斜边   detla为X方向的边，detlaY为Y方向的边      var deltaX=x-startX;    var deltaY=y-startY;    //得到的是这条虚线总共会有多少个小的线段    var numdash=Math.floor(Math.sqrt(deltaX*deltaX+deltaY*deltaY)/dashLength);    for(var i=0;i<numdash;++i){        //调用moveTo方法，或者lineTo方法。        this[i%2==0?'moveTo':'lineTo'](startX+(deltaX/numdash)*i,(startY+(deltaY/numdash)*i));    }    this.moveTo(x,y);}context.lineWidth=3;context.strokeStyle='blue';context.moveTo(20,20);context.dashedLineTo(20,context.canvas.height-20);context.stroke();

线段的端点和连接点的控制

控制线段的端点，也就是线帽的样子lineCap
将这个属性设置为round属性的时候，在端点处为圆 square 为方形会边长
控制连接点 通过linejoin来设置

var canvas=document.getElementById("canvas");//得到一个2D的绘图环境  d必须小写var context=canvas.getContext('2d');  context.lineCap="round";context.lineWidth=30;context.lineJoin='bevel';  //在拐点处少一个三角形  context.moveTo(50,50);  context.lineTo(50,context.canvas.height-50);  context.lineTo(context.canvas.width-50,context.canvas.height-50);context.stroke();

圆形和弧形的绘制

arc()方法这个方法有６个参数　　
原型坐标　ｘ，ｙ　　圆形半径ｄ　　
开始的弧度　　结束的弧度　　　
绘制圆弧的方向（ｔｒｕｅ为逆时针）默认是ｆａｌｓｅ

绘制贝塞尔曲线

context.quadraticCurveTo(150.8,130,160.6,150.5);
四个参数分别表示的是两个点
第一个点表示的是曲线的控制点第二个点表示的是曲线的控制点

变换坐标原点

平移 translate(x,y)x和y为两个新的坐标原点平移

 var canvas=document.getElementById("canvas");    context=canvas.getContext('2d'),            RECTANGLE_WIDTH=100,            RECTANGLE_HEIGHT=100;    context.translate(canvas.width/2-RECTANGLE_WIDTH/2,canvas.height/2-RECTANGLE_HEIGHT/2);    context.strokeRect(0,0,RECTANGLE_WIDTH,RECTANGLE_HEIGHT);

旋转 rotate（角度）
缩放 scale （x，y）
实现X轴镜像的效果

  var canvas=document.getElementById("canvas");    context=canvas.getContext('2d');    function drawRect() {         context.save();        context.stroke="red";        context.strokeRect(0,0,context.canvas.width/2,context.canvas.height/2);    }    drawRect();    context.translate(context.canvas.width,0);    context.scale(-1,1);  //x轴方向变为原来的反方向，y轴方向不变    drawRect();

canvas中的图像合成

0 0