canvas基本画图

<img src="img/lamp.gif"/>

<img src="img/eg_tulip.jpg"/>

<!-- <video autoplay controls>

<source src="img/mov_bbb.mp4" type="video/mp4"/>

</video> -->

<canvas></canvas>

<script type="text/javascript">

var c=document.getElementById("canvas");

var ctx=c.getContext("2d");

//填充单一颜色

//ctx.rect(20,20,200,400);

//ctx.fillStyle="red";

//ctx.fill();

//填充线性渐变颜色

// var gradient=ctx.createLinearGradient(0,0,0,100);

// gradient.addColorStop(0,"red");

// gradient.addColorStop(1,"green");

// ctx.fillStyle=gradient;

// ctx.fillRect(20,20,150,100);

//填充背景图片

// window.onload=function(){

// draw("repeat");

// }

// function draw(direction){

// var img=document.getElementById("lamp")

// var pat=ctx.createPattern(img,direction);

// ctx.rect(0,0,150,100);

// ctx.fillStyle=pat;

// ctx.fill();

// }

//画矩形

//ctx.strokeStyle="red";

// ctx.strokeRect(20,20,200,150);

//线性渐变色矩形

// var gradient=ctx.createLinearGradient(0,0,170,0);

// gradient.addColorStop(0,"red");

// gradient.addColorStop(0.5,"blue");

// gradient.addColorStop(1,"green");

// ctx.lineWidth=5;

// ctx.strokeStyle=gradient;

// ctx.strokeRect(20,20,200,200);

//线性渐变文字

// ctx.font="30px Microsoft YaHei";

// var gradient=ctx.createLinearGradient(0,0,200,10);

// gradient.addColorStop(0,"red");

// gradient.addColorStop(0.5,"blue");

// gradient.addColorStop(1,"green");

// ctx.strokeStyle=gradient;

// ctx.strokeText("Hello Word",20,30);

//绘制带黑色阴影的蓝色矩形

// ctx.shadowBlur=20;

// ctx.shadowOffsetX=10;

// ctx.shadowOffsetY=10;

// ctx.shadowColor="black";

// ctx.fillStyle="blue";

// ctx.fillRect(20,20,100,150);

//放射状/圆形渐变

// var grd=ctx.createRadialGradient(75,50,5,90,60,100);

// grd.addColorStop(0,"red");

// grd.addColorStop(1,"blue");

// ctx.fillStyle=grd;

// ctx.fillRect(10,10,150,100);

//设置或返回线条的结束端点样式lineCap

// ctx.beginPath();

// ctx.lineCap="round";

// ctx.moveTo(20,20);

// ctx.lineTo(200,20);

// ctx.lineWidth=10;

// ctx.stroke();

// ctx.beginPath();

// ctx.lineCap="butt";

// ctx.moveTo(20,40);

// ctx.lineTo(200,40);

// ctx.lineWidth=10;

// ctx.stroke();

// ctx.beginPath();

// ctx.lineCap="square";

// ctx.moveTo(20,60);

// ctx.lineTo(200,60);

// ctx.lineWidth=10;

// ctx.stroke();

//设置或返回两条线相交时，所创建的拐角类型lineJoin:bevel/round/miter

//bevel 创建斜角。

//round 创建圆角。

//miter 默认。创建尖角。

// ctx.lineJoin="bevel";

// ctx.lineWidth=10;

// ctx.moveTo(20,20);

// ctx.lineTo(100,50);

// ctx.lineTo(20,100);

// ctx.stroke();

//设置或返回最大斜接长度miterLimit

// ctx.lineJoin="miter";

// ctx.lineWidth=10;

// ctx.miterLimit=5;

// ctx.moveTo(20,20);

// ctx.lineTo(50,27);

// ctx.lineTo(20,34);

// ctx.stroke();

//画三角形

// ctx.beginPath();

// ctx.moveTo(20,20);

// ctx.lineTo(20,70);

// ctx.lineTo(50,70);

// ctx.strokeStyle="green";

// ctx.closePath();

// ctx.stroke();

//clip从原始画布剪切任意形状和尺寸的区域

// ctx.rect(50,20,200,120);

// ctx.stroke();

// ctx.clip();

// ctx.fillStyle="green";

// ctx.fillRect(0,0,150,200);

//画圆

// ctx.beginPath();

// ctx.arc(100,100,50,0,2*Math.PI);

// ctx.fillStyle="red";

// ctx.stroke();

// ctx.fill();

//创建两切线之间的弧/曲线

// ctx.beginPath();

// ctx.moveTo(20,20);

// ctx.lineTo(100,20);

// ctx.arcTo(150,20,150,70,50);

// ctx.lineTo(150,120);

// ctx.stroke();

//isPointInPath如果指定的点位于当前路径中，则返回 true，否则返回 false

// ctx.rect(20,20,150,200);

// if(ctx.isPointInPath(20,50)){

// ctx.stroke();

// }

//剪切图片，并在画布上对被剪切的部分进行定位：

// document.getElementById("tulip").onload=function(){

// var img=document.getElementById("tulip");

// ctx.drawImage(img,90,180,90,80,20,20,150,200);

// }

//在画布上播放视频

// var video=document.getElementById("video");

// video.addEventListener("play",function(){

// var i=window.setInterval(function(){

// ctx.drawImage(video,0,0);

// },20);

// },false);

// video.addEventListener("pause",function(){

// window.clearInterval(i);

// },false);

// video.addEventListener("ended",function(){

// clearInterval(i);

// },false);

//设置或返回新图像如何绘制到已有的图像上

//source-over,source-atop,source-in,source-out

//destination-over,destination-atop,destination-in,destination-out

//lighter,copy

ctx.fillStyle="red";

ctx.fillRect(0,0,50,50);

ctx.globalCompositeOperation="source-over";

ctx.fillStyle="blue";

ctx.fillRect(20,20,50,50);

//save保存上下文环境

ctx.save();

ctx.shadowOffsetX=10;

ctx.shadowOffsetY=10;

ctx.shadowBlur=5;

ctx.shadowColor="black";

//restore用于恢复到上一次保存的上下文环境

ctx.fillStyle="red";

ctx.fillRect(0,0,50,50);

ctx.restore();

ctx.fillStyle="green";

ctx.fillRect(80,0,50,50);

上面代码先用save方法，保存了当前设置，然后绘制了一个有阴影的矩形。接着，使用restore方法，恢复了保存前的设置，绘制了一个没有阴影的矩形。

猜你在找