HTML绘图支持

时间 2019-11-08

标签 html 绘图支持栏目 HTML 繁體版

原文原文链接

<!DOCTYPE html>
<html>
<head>
<title>HTML绘图支持</title>
<meta http-equiv="Content-Type" content="text/html;charset=gbk"/>
</head>
<body>
 javascript

<canvas id="mc" width="300" height="300" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('mc');
var ctx=canvas.getContext('2d');
//设置填充颜色
ctx.fillStyle="#f00";
//填充一个矩形
ctx.fillRect(30,20,120,60);
ctx.fillStyle="#ff0";
ctx.fillRect(80,60,120,60); html

//设置线条颜色
ctx.strokeStyle="#00f";
//设置线条宽度
ctx.lineWidth=10;
//绘制矩形边框
ctx.strokeRect(30,130,120,60); java

ctx.strokeStyle="#0ff";
//设置连接点类型
ctx.lineJoin="round";
ctx.strokeRect(80,160,120,60); 算法

ctx.strokeStyle="#f0f";
ctx.lineJoin="bevel";
ctx.strokeRect(130,190,120,60);
</script> 数据库

<canvas id="zfc" width="400" height="400" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('zfc');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#00f';
ctx.font='italic 50px 隶书';
ctx.textBaseline='top';
ctx.fillText("HTML5",0,0); canvas

ctx.strokeStyle="#f0f";
ctx.font='bold 45px 宋体';
ctx.strokeText("Crazy HTML5",0,50);
</script> 网络

<canvas id="yy" width="500" height="500" style="border:1px solid black"></canvas>
<script type="text/javascript">
   var canvas=document.getElementById('yy');
   var ctx=canvas.getContext('2d');
   ctx.shadowBlur=5.6;
   ctx.shadowColor='#222';
   ctx.shadowOffetX=10;
   ctx.shadowOffY=-6;
   ctx.fillStyle="#00f";
   ctx.font="italic 50px 宋体";
   ctx.textBaseline='top';
   ctx.fillText("Crazy HTML",0,0); dom

   ctx.strokeStyle="#f0f";
   ctx.font="bold 45px 宋体";
   ctx.strokeText("疯狂Java",0,50); 异步

   ctx.fillStyle="#0ff";
   ctx.fillRect(20,150,180,80);
   ctx.strokeStyle="#ff0";
   ctx.lineWidth=8;
   ctx.strokeRect(300,150,180,80);
</script> 函数

<h2>绘制图形</h2>
<canvas id="yx" width="400" height="300" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('yx');
var ctx=canvas.getContext('2d');
for(var i=0;i<10;i++){
//开始定义路径
ctx.beginPath();
//添加一段圆弧
ctx.arc(i*25,i*25,(i+1)*8,0,Math.PI*2,true);
//关闭路径
ctx.closePath();
//设置填充色
ctx.fillStyle='rgba(255,0,255,'+(10-i)*0.1+')';
//填充路径
ctx.fill();
}
</script>
<h2>actTo示例</h2>
<canvas id="at" width="400" height="180" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('at');
var ctx=canvas.getContext('2d');
function createRoundPath(Context,x1,y1,width,height,radius){
ctx.beginPath();
ctx.moveTo(x1+radius,y1);

ctx.lineTo(x1+width-radius,y1);
ctx.arcTo(x1+width,y1,x1+width,y1+radius,radius);

ctx.lineTo(x1+width,y1+height-radius);
ctx.arcTo(x1+width,y1+height,x1+width-radius,y1+height,radius);

ctx.lineTo(x1+radius,y1+height);
ctx.arcTo(x1,y1+height,x1,y1+height-radius,radius);

ctx.lineTo(x1,y1+radius);
ctx.arcTo(x1,y1,x1+radius,y1,radius);

ctx.closePath();
}
ctx.lineWidth=3;
createRoundPath(ctx,30,30,200,100,20);
ctx.stroke();
</script>
<h1>lineTo</h1>
<canvas id="lt" width="400" height="200" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('lt');
var ctx=canvas.getContext('2d');
function createStar(context ,n ,dx,dy,size){
context.beginPath();
var dig=Math.PI/n*4;
for(var i=0;i<n;i++){
   var x=Math.sin(i*dig);
   var y=Math.cos(i*dig);
   context.lineTo(x*size+dx,y*size+dy);
   }
   context.closePath();
}
//绘制三角形
createStar(ctx,3,60,60,50);
ctx.fillStyle="#f00";
ctx.fill();
//绘制五角形
createStar(ctx,5,160,60,50);
ctx.fillStyle="#0f0";
ctx.fill();
//绘制七角形
createStar(ctx,7,260,60,50);
ctx.fillStyle="#00f";
ctx.fill();
//绘制九角形
createStar(ctx,9,360,60,50);
ctx.fillStyle="#f0f";
ctx.fill();
</script>

<canvas id="ct" width="400"height="200" style="border:1px solid black"></canvas>
<script type="text/javascript">
    var canvas=document.getElementById('ct');
var ctx=canvas.getContext('2d');
function createFlower(context,n,dx,dy,size,length){
  context.beginPath();
  context.moveTo(dx,dy+size);
  var dig=2*Math.PI/n;
  for(var i=1;i<n+1;i++){
   //计算控制点的坐标
   var ctrlx=Math.sin((i-0.5)*dig)*length+dx;
   var ctrly=Math.cos((i-0.5)*dig)*length+dy;
   //计算结束点的坐标
   var x=Math.sin(i*dig)*size+dx;
   var y=Math.cos(i*dig)*size+dy;
   //绘制二次曲线
   context.quadraticCurveTo(ctrlx,ctrly,x,y);

}
   context.closePath();
  }
  //绘制5瓣花朵
       createFlower(ctx,5,70,100,30,80);
    ctx.fillStyle="#f00";
    ctx.fill();
    //绘制6瓣花朵
       createFlower(ctx,6,200,100,30,80);
    ctx.fillStyle="#0f0";
    ctx.fill();
    //绘制7瓣花朵
       createFlower(ctx,7,330,100,30,80);
    ctx.fillStyle="#f0f";
    ctx.fill();
</script>

<hr/>
<h2>绘制位图</h2>
<canvas id="wt" width="650" height="380" style="border:1px solid black;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('wt');
var ctx=canvas.getContext('2d');
var img=new Image();
img.src="imgs/1.jpg";
img.onload=function(){
//原始尺寸参数x,y
ctx.drawImage(img,20,70);
//绘制图片时进行缩放参数x,y 缩放的 w,h
ctx.drawImage(img,320,10,120,150);
//从原位图挖一块放大3倍绘制在Canvas上
var sd=50;
var sh=65;
ctx.drawImage(img,2,50,sd,sh,460,10,sd*3,sh*3);
}
</script>

<h2>坐标变换</h2>
<canvas id="zbhh" width="650" height="380" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('zbhh');
var ctx=canvas.getContext('2d');
ctx.fillStyle='rgba(255,0,0,0.3)';
ctx.translate(100,200);
for(var i=0;i<50;i++){
ctx.translate(50,50);
ctx.scale(0.93,0.93);
ctx.rotate(-Math.PI/10);
ctx.fillRect(0,0,150,75);
}
</script>

<h2>雪花飘飘</h2>
<canvas id="show" width="420" height="280" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById("show");
var ctx=canvas.getContext('2d');
setInterval("fall(ctx);",200);
snowPos=[
{x:20,y:4},
{x:60,y:4},
{x:100,y:4},
{x:140,y:4},
{x:180,y:4},
{x:220,y:4},
{x:260,y:4},
{x:300,y:4},
{x:340,y:4},
{x:380,y:4}
];
function createFlower(context,n,dx,dy,size,length){
context.beginPath();
context.moveTo(dx,dy+size);
var dig=2*Math.PI/n;
for(var i=1;i<n+1;i++){
       //计算控制点的坐标
    var ctrlx=Math.sin((i-0.5)*dig)*length+dx;
    var ctrly=Math.cos((i-0.5)*dig)*length+dy;
    //计算结束点的坐标
    var x=Math.sin(i*dig)*size+dx;
    var y=Math.cos(i*dig)*size+dy;
    //绘制二次曲线
    context.quadraticCurveTo(ctrlx,ctrly,x,y);
  }
  context.closePath();
}
function fall(context){
context.fillStyle="#000";
context.fillRect(0,0,420,280);
context.fillStyle="#fff";
for(var i=0;i<snowPos.length;i++){
  //保存当前绘图状态
  context.save();
  context.translate(snowPos[i].x,snowPos[i].y);
  context.rotate((Math.random()*6-3)*Math.PI/10);
  //控制雪花掉落
  snowPos[i].y+=Math.random()*8;
  if(snowPos[i].y>280){
   snowPos[i].y=4;
   }
  //建立并绘制雪花
  createFlower(context,6,0,0,5,8);
  context.fill();
  //恢复绘图状态
  context.restore();
}
}
</script>

<p></p>
<h2>叠加风格</h2>
<select style="width:160px;" onChange="draw(this.value);">
<option value="source-over" selected="selected">source-over</option>
<option value="source-in">source-in</option>
<option value="source-out">source-out</option>
<option value="source-atop">source-atop</option>
<option value="destination-over">destination-over</option>
<option value="destination-in">destination-in</option>
<option value="destination-out">destination-out</option>
<option value="destination-atop">destination-atop</option>
<option value="lighter">lighter</option>
<option value="xor">xor</option>
<option value="copy">copy</option>
</select><br/>
<canvas id="dj" width="400" height="200" style="border:1px solid black;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('dj');
var ctx=canvas.getContext('2d');
var draw=function(coma){
   ctx.save();
   ctx.clearRect(0,0,400,200);
   ctx.fillStyle="#f00";
   ctx.fillRect(30,20,160,100);
   ctx.globalCompositeOperation=coma;
   ctx.fillStyle="#0f0";
   ctx.fillRect(120,60,160,100);
   ctx.restore();
   }
</script>

<canvas id="xj" width="400" height="300" style="border:1px solid black;"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('xj');
var ctx=canvas.getContext('2d');
ctx.clearRect(0,0,400,280);
ctx.save();
ctx.translate(30,20);
//建立线性渐变
var lg=ctx.createLinearGradient(0,0,160,80);
//向线性渐变中添加颜色
lg.addColorStop(0.2,"#f00");
lg.addColorStop(0.5,"#0f0");
lg.addColorStop(0.9,"#00f");
//使用线性渐变做为填充色
ctx.fllStyle=lg;
ctx.fillRect(0,0,160,80);
ctx.restore();
//平移坐标系统
ctx.translate(280,160);
ctx.beginPath();
ctx.arc(0,0,80,0,Math.PI*2,true);
ctx.closePath();
ctx.lineWidth=12;
//再次建立线性渐变
var lg2=ctx.createLinearGradient(-40,-40,80,50);
lg2.addColorStop(0.1,"#ff0");
lg2.addColorStop(0.4,"#0ff");
lg2.addColorStop(0.8,"#f0f");
ctx.strokeStyle=lg2;
ctx.stroke();
</script>

<hr/>
<h2>圓形漸變</h2>
<canvas id="yj" width="400" height="280" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('yj');
var ctx=canvas.getContext('2d');
ctx.save();
ctx.translate(30,20);
//建立圆形渐变
var lg=ctx.createRadialGradient(80,40,5,80,40,60);
//向线性渐变中添加颜色
lg.addColorStop(0.2,"#f00");
lg.addColorStop(0.5,"#0f0");
lg.addColorStop(0.9,"#00f");
//使用线性渐变做为填充色
ctx.fillStyle=lg;
ctx.fillRect(0,0,160,80);
ctx.restore();
//平移坐标系统
ctx.translate(280,160);
ctx.beginPath();
ctx.arc(0,0,80,0,Math.PI*2,true);
ctx.closePath();
ctx.lineWidth=12;
//再次建立线性渐变
lg2=ctx.createRadialGradient(0,0,5,0,0,80);
lg2.addColorStop(0.1,"#f00");
lg2.addColorStop(0.4,"#0ff");
lg2.addColorStop(0.8,"#f0f");
ctx.fillStyle=lg2;
ctx.fill();
</script>

<hr/>
<h2>位图填充</h2>
<canvas id="wttc" width="400" height="280" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('wttc');
var ctx=canvas.getContext('2d');
ctx.save();
ctx.translate(30,20);
var img=new Image();
img.src="imgs/1.jpg";
img.onload=function(){
var imgPattern=ctx.createPattern(img,"repeat");
ctx.fillStyle=imgPattern;
ctx.fillRect(0,0,160,100);
ctx.restore();
ctx.translate(280,160);
ctx.beginPath();
ctx.arc(0,0,80,0,Math.PI*2,true);
ctx.closePath();
ctx.lineWidth=12;
ctx.strokeStyle=imgPattern;
ctx.stroke();
}
</script>

<h2>位图裁剪</h2>
<canvas id="wtcj" width="400" height="350" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('wtcj');
var ctx=canvas.getContext('2d');
var dig=Math.PI/20;
var count=0;
var img=new Image();
img.src="imgs/1.jpg";
img.onload=function(){
//每隔0.15秒调用一次addRadial函数
setInterval("addRadial()",150);
}
var addRadial=function(){
  ctx.save();
  ctx.beginPath();
  ctx.arc(200,130,200,0,dig*++count,false);
  //让圆弧链接到圆形
  ctx.lineTo(200,130);
  ctx.closePath();
  ctx.clip();
  //此时绘制的图片只有路径覆盖的部分才会显示出来
  ctx.drawImage(img,124,20);
  ctx.restore();
  }
</script>

<h2>像素处理</h2>
<canvas id="xscl" width="400" height="350" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('xscl');
var ctx=canvas.getContext('2d');
var img=new Image();
img.src="imgs/1.jpg";
img.onload=function(){
//带透明度参数的方法绘制图片
drawImage(img,124,20,0.4);
}
var drawImage=function(image,x,y,alpha){
  ctx.drawImage(image,x,y);
  var imgData=ctx.getImageData(x,y,image.width,image.height);
  for(var i=0,len=imgData.data.length;i<len;i+=4){
  imgData.data[i+3]=imgData.data[i+3]*alpha;
  }
      ctx.putImageData(imgData,x,y);
  }
</script>

<h2>高亮显示</h2>
<canvas id="xsgl" width="400" height="350" style="border:1px solid black"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('xsgl');
var ctx=canvas.getContext('2d');
var img=new Image();
img.src="imgs/1.jpg";
img.onload=function(){
drawImage(img,124,20,1.6);
}
var drawImage=function(image,x,y,ligth){
  ctx.drawImage(image,x,y);
  var imgData=ctx.getImageData(x,y,image.width,image.height);
  for(var i=0,len=imgData.data.length;i<len;i+=4){
   imgData.data[i+0]=imgData.data[i+0]*ligth;
   imgData.data[i+1]=imgData.data[i+1]*ligth;
   imgData.data[i+2]=imgData.data[i+2]*ligth;
   }
  ctx.putImageData(imgData,x,y);
  }
</script>

<h2>位图输出</h2>
<canvas id="wtsc" width="400" height="280" style="border:1px solid black"></canvas>
<img src="" id="result" alt="图片输出"/>
<script type="text/javascript">
var canvas=document.getElementById('wtsc');
var ctx=canvas.getContext('2d');
ctx.save();
ctx.translate(30,20);
var img=new Image();
img.src="imgs/1.jpg";
img.onload=function(){
//建立位图填充
imgPattern=ctx.createPattern(img,"repeat");
ctx.fillStyle=imgPattern;
ctx.fillRect(0,0,160,80);
ctx.restore();
ctx.translate(280,160);
ctx.beginPath();
ctx.arc(0,0,80,0,Math.PI82,true);
ctx.closePath();
ctx.lineWidth=12;
ctx.strokeStyle=imgPattern;
ctx.stroke();
document.getElementById('result').src=canvas.toDataURL("image/png");
}
</script>
 </body> </html>