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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。