Canvas绘制图形图像
生活随笔
收集整理的這篇文章主要介紹了
Canvas绘制图形图像
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><script>//矩形function drawRect(id){var canvas = document.getElementById(id);var content = canvas.getContext("2d");content.fillStyle = "#FF0000";//定義填充色content.fillRect(0,0,200,200);//定義起點0,0 寬200 高200}//線條function drawLine(id){var canvas = document.getElementById(id);var context = canvas.getContext("2d");context.moveTo(50,50);//定義線條起點context.lineTo(100,50);//從起點開始移動context.lineTo(50,50);//從上面的終點開始移動context.stroke();}//三角形function drawLineThree(id){//獲取Canvas對象(畫布)var canvas = document.getElementById(id);//簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤if(canvas.getContext){//獲取對應的CanvasRenderingContext2D對象(畫筆)var ctx = canvas.getContext("2d");//開始一個新的繪制路徑ctx.beginPath();//設置線條顏色為藍色ctx.strokeStyle = "blue";//設置填充色ctx.fillStyle = "red";//設置路徑起點坐標ctx.moveTo(20, 50);//繪制直線線段到坐標點(60, 50)ctx.lineTo(20, 100);//繪制直線線段到坐標點(60, 90)ctx.lineTo(70, 100);//先關閉繪制路徑。注意，此時將會使用直線連接當前端點和起始端點。ctx.closePath();//填充顏色ctx.fill();//最后，按照繪制路徑畫出直線ctx.stroke();}}//圓function drawArc(id){var canvas = document.getElementById(id);var context = canvas.getContext("2d");//定義徑向漸變色var rg =context.createRadialGradient(50, 50, 0, 50, 50, 20);rg.addColorStop(0,'red');rg.addColorStop(0.5,'yellow');rg.addColorStop(1,'blue');context.fillStyle = rg;//定義填充色context.beginPath();/*cx 水平坐標cy 垂直坐標radius 半徑start-angel 圓周起始位置end_angle 弧長 Math.PI是半圓 Math.PI*2是整個圓 0.5為四分之一direction 順、逆時針 false為逆時針，true為順時針（決定了圓弧的方向）*/context.arc(50,50,20,0,Math.PI*2,true);context.closePath();context.fill();}//橫向漸變function drawLinearGradient(id){var c=document.getElementById(id);var cxt=c.getContext("2d");var grd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,"#FF0000");grd.addColorStop(1,"#00FF00");cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);}//圖像function drawImg(id){var canvas = document.getElementById(id);var context = canvas.getContext("2d");var img = new Image();img.src = "1.png";//html5在使用drawImage繪圖的時候，出現不顯示的問題，原來要想是圖片正常顯示需要為圖片添加一個onload事件img.onload = function(){context.drawImage(img,100,100);}context.drawImage(img,100,100);}</script>
</head>
<body οnlοad="drawRect('canvasid')"><canvas id="canvasid" width="500" height="500"></canvas>
</body>
</html>
總結
以上是生活随笔為你收集整理的Canvas绘制图形图像的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Apache shutdown unex
- 下一篇： FFmpeg转HTML5支持的视频格式