當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

分享HTML5 canvas 的总结

發(fā)布時間：2025/6/15 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了分享HTML5 canvas 的总结小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

下面我貼出的是對 canvas 的一份總結

便于平時翻閱以及參考

canvas參考 <html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
/*
fillStyle 填充顏色
fillRect 繪制填充的矩形
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
*/

/*
fillRect 繪制填充的矩形
clearRect 繪制一個矩形的輪廓
strokeRect 清除指定區(qū)域,并使其完全透明
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
*/

/*
beginPath 創(chuàng)建一個路徑
moveTo 起點坐標
lineTo 目標坐標
fill 填充實心圖形
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
*/

/*
beginPath 創(chuàng)建一個路徑
moveTo 起點坐標
arc 畫弧或圓

arc(x, y, radius, startAngle, endAngle, anticlockwise)
x, y 描述弧的圓形的圓心的坐標。
radius 描述弧的圓形的半徑。
startAngle 沿著圓指定弧的開始點和結束點的一個角度。這個角度用弧度來衡量。
endAngle 沿著 X 軸正半軸的三點鐘方向的角度為 0,角度沿著逆時針方向而增加。
counterclockwise 弧沿著圓周的逆時針方向（TRUE）還是順時針方向（FALSE）遍歷。

ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
*/

/*
for (i=0;i<4;i++){
for(j=0;j<3;j++){ //chinese_xu 原始代碼
ctx.beginPath();
var x = 25+j*50; // x coordinate
var y = 25+i*50; // y coordinate
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle ---//修復錯誤標點
var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise

ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);

if (i>1){
ctx.fill();
} else {
ctx.stroke();
}
}
}
//chinese_xu 原始代碼并沒有按照1/4圓遞增來畫。
//修改后輸出4行4列,要把畫布擴大到200*200觀看
for (i=0;i<4;i++){
for(j=0;j<4;j++){
ctx.beginPath();
var x = 25+j*50; // x coordinate
var y = 25+i*50; // y coordinate
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI*(2-j/2); // End point on circle
var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise

ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);

if (i>1){
ctx.fill();
} else {
ctx.stroke();
}
}
}
*/

/*
quadraticCurveTo 二次方曲線

quadraticCurveTo(cp1x, cp1y, x, y) // BROKEN in Firefox 1.5 (see work around below)

x , y 是終點坐標
cp1x , cp1y 是第一個控制點的坐標
cp2x , cp2y 是第二個控制點的坐標

ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();
*/

/*
bezierCurveTo 貝塞爾曲線

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

x , y 是終點坐標
cp1x , cp1y 是第一個控制點的坐標
cp2x , cp2y 是第二個控制點的坐標

ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();
*/

/*
an example, need to use function of roundedRect
// Draw shapes
roundedRect(ctx,12,12,150,150,15);
roundedRect(ctx,19,19,150,150,9);
roundedRect(ctx,53,53,49,33,10);
roundedRect(ctx,53,119,49,16,6);
roundedRect(ctx,135,53,49,33,10);
roundedRect(ctx,135,119,25,49,10);

// Character 1
ctx.beginPath();
ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
ctx.lineTo(34,37);
ctx.fill();

// blocks
for(i=0;i<8;i++){
ctx.fillRect(51+i*16,35,4,4);
}
for(i=0;i<6;i++){
ctx.fillRect(115,51+i*16,4,4);
}
for(i=0;i<8;i++){
ctx.fillRect(51+i*16,99,4,4);
}

// character 2
ctx.beginPath();
ctx.moveTo(83,116);
ctx.lineTo(83,102);
ctx.bezierCurveTo(83,94,89,88,97,88);
ctx.bezierCurveTo(105,88,111,94,111,102);
ctx.lineTo(111,116);
ctx.lineTo(106.333,111.333);
ctx.lineTo(101.666,116);
ctx.lineTo(97,111.333);
ctx.lineTo(92.333,116);
ctx.lineTo(87.666,111.333);
ctx.lineTo(83,116);
ctx.fill();
ctx.fillStyle = "white";
ctx.beginPath();
ctx.moveTo(91,96);
ctx.bezierCurveTo(88,96,87,99,87,101);
ctx.bezierCurveTo(87,103,88,106,91,106);
ctx.bezierCurveTo(94,106,95,103,95,101);
ctx.bezierCurveTo(95,99,94,96,91,96);
ctx.moveTo(103,96);
ctx.bezierCurveTo(100,96,99,99,99,101);
ctx.bezierCurveTo(99,103,100,106,103,106);
ctx.bezierCurveTo(106,106,107,103,107,101);
ctx.bezierCurveTo(107,99,106,96,103,96);
ctx.fill();
ctx.fillStyle = "black";
ctx.beginPath();
ctx.arc(101,102,2,0,Math.PI*2,true);
ctx.fill();
ctx.beginPath();
ctx.arc(89,102,2,0,Math.PI*2,true);
ctx.fill();
*/

/*
drawImage 引入圖像

drawImage(image, x, y)
image 是 image 或者 canvas 對象
x , y 是其在目標 canvas 里的起始坐標

var img = new Image();
img.src = '../images/backdrop.png';
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
*/

/*
drawImage 縮放圖像
drawImage(image, x, y, width, height)
image 是 image 或者 canvas 對象
x , y 是其在目標 canvas 里的起始坐標
width , height 分別是圖像在 canvas 中顯示大小

var img = new Image();
img.src = '../images/rhino.jpg';
img.onload = function(){
for (i=0;i<2;i++){
for (j=0;j<3;j++){
ctx.drawImage(img,j*100,i*76,100,76);
}
}
}
*/

/*
drawImage 切片效果
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
image 是 image 或者 canvas 對象
sx , sy 被切圖片的起始位置
sWidth , sHeight 被切圖片的寬,高
dx , dy 被切圖片的顯示起始位置
sWidth , sHeight 被切圖片的顯示寬,高

var img1 = new Image();
img1.src = '../images/rhino.jpg';
ctx.drawImage(img1,33,71,104,124,21,20,87,104);
var img2 = new Image();
img2.src = '../images/picture_frame.png';
ctx.drawImage(img2,0,0);
*/

/*
畫廊的例子暫未加入
可參考 https://developer.mozilla.org/cn/Canvas_tutorial%3AUsing_images
*/

/*
fillStyle 設置顏色
for (var i=0;i<6;i++){
for (var j=0;j<12;j++){
ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-21.25*j) + ',0)';
ctx.fillRect(j*25,i*25,25,25);
}
}
*/

/*
strokeStyle 設置顏色
for (var i=0;i<6;i++){
for (var j=0;j<12;j++){
ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-21.25*j) + ')';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
*/

/*
透明度 globalAlpha 0~1
example1

// draw background
ctx.fillStyle = '#FD0';
ctx.fillRect(0,0,75,75);
ctx.fillStyle = '#6C0';
ctx.fillRect(75,0,75,75);
ctx.fillStyle = '#09F';
ctx.fillRect(0,75,75,75);
ctx.fillStyle = '#F30';
ctx.fillRect(75,75,75,75);
ctx.fillStyle = '#FFF';

// set transparency value
ctx.globalAlpha = 0.2;

// Draw semi transparent circles
for (var i=0;i<7;i++){
ctx.beginPath();
ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
ctx.fill();
}
*/

/*
透明度 globalAlpha 0~1
example2

// draw background
ctx.fillStyle = 'rgb(255,221,0)';
ctx.fillRect(0,0,150,37.5);
ctx.fillStyle = 'rgb(102,204,0)';
ctx.fillRect(0,37.5,150,37.5);
ctx.fillStyle = 'rgb(0,153,255)';
ctx.fillRect(0,75,150,37.5);
ctx.fillStyle = 'rgb(255,51,0)';
ctx.fillRect(0,112.5,150,37.5);

// Draw semi transparent circles
for (var i=0;i<10;i++){
ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
for (var j=0;j<4;j++){
ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
}
}
*/

/*
lineWidth 設置線條的寬度
for (var i = 0; i < 13; i++){
ctx.lineWidth = 1+i;
ctx.beginPath();
ctx.moveTo(5+i*14,5);
ctx.lineTo(5+i*14,140);
ctx.stroke();
}
*/

/*
lineCap 線段端點顯示的樣子
butt 默認值,平端,無延伸
round 圓頭,伸出以直線寬度為直徑的半圓
square 平端,延伸半個直線的寬度

var lineCap = ['butt','round','square'];
// Draw guides
ctx.strokeStyle = '#09f';
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(140,10);
ctx.moveTo(10,140);
ctx.lineTo(140,140);
ctx.stroke();

// Draw lines
ctx.strokeStyle = 'black';
for (var i=0;i<lineCap.length;i++){
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(25+i*50,10);
ctx.lineTo(25+i*50,140);
ctx.stroke();
}
*/

/*
lineJoin 2段線段連接處的樣子
round 圓頭連接
bevel 平頭鏈接
miter 默認值,剪頭連接

var lineJoin = ['round','bevel','miter'];
ctx.lineWidth = 10;
for (i=0;i<lineJoin.length;i++){
ctx.lineJoin = lineJoin[i];
ctx.beginPath();
ctx.moveTo(-5,5+i*40);
ctx.lineTo(35,45+i*40);
ctx.lineTo(75,5+i*40);
ctx.lineTo(115,45+i*40);
ctx.lineTo(155,5+i*40);
ctx.stroke();
}
*/

/*
miterLimit 用來設定外延交點與連接點的最大距離,如果交點距離大于此值,連接效果會變成了 bevel
詳情參考 https://developer.mozilla.org/cn/Canvas_tutorial/Applying_styles_and_colors
*/

/*
線性漸變
createLinearGradient(x1,y1,x2,y2)
漸變的起點 (x1,y1) 與終點 (x2,y2)

var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, '#00ABEB');
lingrad.addColorStop(0.5, '#fff');
lingrad.addColorStop(0.5, '#26C000');
lingrad.addColorStop(1, '#fff');

var lingrad2 = ctx.createLinearGradient(0,50,0,95);
lingrad2.addColorStop(0.5, '#000');
lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

// assign gradients to fill and stroke styles
ctx.fillStyle = lingrad;
ctx.strokeStyle = lingrad2;

// draw shapes
ctx.fillRect(10,10,130,130);
ctx.strokeRect(50,50,50,50);
*/

/*
圓形漸變
createRadialGradient(x1,y1,r1,x2,y2,r2)
前三個定義一個以 (x1,y1) 為原點,半徑為 r1 的圓,后三個參數(shù)則定義另一個以 (x2,y2) 為原點,半徑為 r2 的圓

// Create gradients
var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1,159,98,0)');

var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
radgrad2.addColorStop(0, '#FF5F98');
radgrad2.addColorStop(0.75, '#FF0188');
radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
radgrad3.addColorStop(0, '#00C9FF');
radgrad3.addColorStop(0.8, '#00B5E2');
radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
radgrad4.addColorStop(0, '#F4F201');
radgrad4.addColorStop(0.8, '#E4C700');
radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

// draw shapes
ctx.fillStyle = radgrad4;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad3;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad2;
ctx.fillRect(0,0,150,150);
ctx.fillStyle = radgrad;
ctx.fillRect(0,0,150,150);
*/

/*
等效于循環(huán)實現(xiàn)圖案
createPattern(image,type)
Image 可以是一個 Image 對象的引用, 或者另一個 canvas 對象
Type 必須是下面的字符串值之一: repeat,repeat-x,repeat-y 和 no-repeat

// create new image object to use as pattern
var img = new Image();
img.src = '../images/backdrop.png';
img.onload = function(){

// create pattern
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,150,150);
}
*/

/*
陰影
shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color
shadowOffsetX 和 shadowOffsetY 用來設定陰影在 X 和 Y 軸的延伸距離,它們是不受變換矩陣所影響的
負值表示陰影會往上或左延伸,正值則表示會往下或右延伸,他們默認都是 0
shadowBlur 用于設定陰影的模糊程度,默認為 0
shadowColor 用于設定陰影效果的延伸,值可以是標準的 CSS 顏色值,默認是全透明的黑色

ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("Sample String", 5, 30);
*/

/*
save() 和 restore()
用來保存和恢復 canvas 狀態(tài)的
Canvas 狀態(tài)是以堆(stack)的方式保存的,每一次調(diào)用 save 方法,當前的狀態(tài)就會被推入堆中保存起來
每一次調(diào)用 restore 方法,上一個保存的狀態(tài)就從堆中彈出,所有設定都恢復

ctx.fillRect(0,0,150,150); // Draw a rectangle with default settings
ctx.save(); // Save the default state

ctx.fillStyle = '#09F' // Make changes to the settings
ctx.fillRect(15,15,120,120); // Draw a rectangle with new settings

ctx.save(); // Save the current state
ctx.fillStyle = '#FFF' // Make changes to the settings
ctx.globalAlpha = 0.5;
ctx.fillRect(30,30,90,90); // Draw a rectangle with new settings

ctx.restore(); // Restore previous state
ctx.fillRect(45,45,60,60); // Draw a rectangle with restored settings

ctx.restore(); // Restore original state
ctx.fillRect(60,60,30,30); // Draw a rectangle with restored settings
*/

/*
位移
translate(x, y)
x 是左右偏移量
y 是上下偏移量

ctx.fillRect(0,0,300,300);
for (var i=0;i<3;i++) {
for (var j=0;j<3;j++) {
ctx.save();
ctx.strokeStyle = "#9CFF00";
ctx.translate(50+j*100,50+i*100);
drawSpirograph(ctx,20*(j+2)/(j+1),-8*(i+3)/(i+1),10);
ctx.restore();
}
}
*/

/*
旋轉
rotate(angle)
angle 旋轉的角度,它是順時針方向的,以弧度為單位的值

ctx.translate(75,75);
for (var i=1;i<6;i++){ // Loop through rings (from inside to out)
ctx.save();
ctx.fillStyle = 'rgb('+(51*i)+','+(255-51*i)+',255)';

for (var j=0;j<i*6;j++){ // draw individual dots
ctx.rotate(Math.PI*2/(i*6));
ctx.beginPath();
ctx.arc(0,i*12.5,5,0,Math.PI*2,true);
ctx.fill();
}
ctx.restore();
}
*/

/*
縮放
scale(x, y)
x,y 分別是橫軸和縱軸的縮放因子,它們都必須是正值
值比 1.0 小表示縮小,比 1.0 大則表示放大

ctx.strokeStyle = "#fc0";
ctx.lineWidth = 1.5;
ctx.fillRect(0,0,300,300);

// Uniform scaling
ctx.save()
ctx.translate(50,50);
drawSpirograph(ctx,22,6,5); // no scaling

ctx.translate(100,0);
ctx.scale(0.75,0.75);
drawSpirograph(ctx,22,6,5);

ctx.translate(133.333,0);
ctx.scale(0.75,0.75);
drawSpirograph(ctx,22,6,5);
ctx.restore();

// Non-uniform scaling (y direction)
ctx.strokeStyle = "#0cf";
ctx.save()
ctx.translate(50,150);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);

ctx.translate(100,0);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);

ctx.translate(100,0);
ctx.scale(1,0.75);
drawSpirograph(ctx,22,6,5);
ctx.restore();

// Non-uniform scaling (x direction)
ctx.strokeStyle = "#cf0";
ctx.save()
ctx.translate(50,250);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);

ctx.translate(133.333,0);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);

ctx.translate(177.777,0);
ctx.scale(0.75,1);
drawSpirograph(ctx,22,6,5);
ctx.restore();
*/

/*
矩陣計算
詳情參考 https://developer.mozilla.org/cn/Canvas_tutorial/Transformations

var sin = Math.sin(Math.PI/6);
var cos = Math.cos(Math.PI/6);
ctx.translate(200, 200);
var c = 0;
for (var i=0; i <= 12; i++) {
c = Math.floor(255 / 12 * i);
ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
ctx.fillRect(0, 0, 100, 10);
ctx.transform(cos, sin, -sin, cos, 0, 0);
}
ctx.setTransform(-1, 0, 0, 1, 200, 200);
//ctx.fillStyle = "rgba(255, 128, 255, 0.5)";
//ctx.fillRect(0, 50, 100, 100);
*/

/*
在已有圖形后面再畫新圖形，還可以用來遮蓋，清除(比 clearRect 方法強勁得多)某些區(qū)域
可參考 https://developer.mozilla.org/cn/Canvas_tutorial/Compositing

globalCompositeOperation = type
type 有12種
source-over 新圖形會覆蓋在原有內(nèi)容之上,默認值
source-in 新圖形會僅僅出現(xiàn)與原有內(nèi)容重疊的部分,其它區(qū)域都變成透明的
source-out 只有新圖形中與原有內(nèi)容不重疊的部分會被繪制出來
source-atop 新圖形中與原有內(nèi)容重疊的部分會被繪制,并覆蓋于原有內(nèi)容之上
destination-over 在原有內(nèi)容之下繪制新圖形
destination-in 原有內(nèi)容中與新圖形重疊的部分會被保留,其它區(qū)域都變成透明的
destination-out 原有內(nèi)容中與新圖形不重疊的部分會被保留
destination-atop 原有內(nèi)容中與新內(nèi)容重疊的部分會被保留,并會在原有內(nèi)容之下繪制新圖形
lighter 兩圖形中重疊部分作加色處理
darker 兩圖形中重疊的部分作減色處理
xor 重疊的部分會變成透明
copy 只有新圖形會被保留,其它都被清除掉
*/

/*
所有在路徑外的部分被遮蓋住
clip()

ctx.fillRect(0,0,150,150);
ctx.translate(75,75);

// Create a circular clipping path
ctx.beginPath();
ctx.arc(0,0,60,0,Math.PI*2,true);
ctx.clip();

// draw background
var lingrad = ctx.createLinearGradient(0,-75,0,75);
lingrad.addColorStop(0, '#232256');
lingrad.addColorStop(1, '#143778');

ctx.fillStyle = lingrad;
ctx.fillRect(-75,-75,150,150);

// draw stars
for (j=1;j<50;j++){
ctx.save();
ctx.fillStyle = '#fff';
ctx.translate(75-Math.floor(Math.random()*150),75-Math.floor(Math.random()*150));
drawStar(ctx,Math.floor(Math.random()*4)+2);
ctx.restore();
}
*/

}
}

/*
function roundedRect(ctx,x,y,width,height,radius){
ctx.beginPath();
ctx.moveTo(x,y+radius);
ctx.lineTo(x,y+height-radius);
ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
ctx.lineTo(x+width-radius,y+height);
ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
ctx.lineTo(x+width,y+radius);
ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
ctx.lineTo(x+radius,y);
ctx.quadraticCurveTo(x,y,x,y+radius);
ctx.stroke();
}
*/

/*
畫螺旋圖案的方法

function drawSpirograph(ctx,R,r,O){
var x1 = R-O;
var y1 = 0;
var i = 1;
ctx.beginPath();
ctx.moveTo(x1,y1);
do {
if (i>20000) break;
var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
ctx.lineTo(x2,y2);
x1 = x2;
y1 = y2;
i++;
} while (x2 != R-O && y2 != 0 );
ctx.stroke();
}
*/

/*
畫星星
function drawStar(ctx,r){
ctx.save();
ctx.beginPath()
ctx.moveTo(r,0);
for (i=0;i<9;i++){
ctx.rotate(Math.PI/5);
if(i%2 == 0) {
ctx.lineTo((r/0.525731)*0.200811,0);
} else {
ctx.lineTo(r,0);
}
}
ctx.closePath();
ctx.fill();
ctx.restore();
}
*/

</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="draw();">
<canvas id="tutorial" width='400' height='400'></canvas>
</body>
</html>

分享下

去掉

即可看到效果

轉載于:https://www.cnblogs.com/loadbuffer/archive/2012/02/29/2373900.html

總結

以上是生活随笔為你收集整理的分享HTML5 canvas 的总结的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

canvas

上一篇： wifi 移植
下一篇： nginx---ngix虚拟主机配置实例