HTML Canvas 繪製五角星

阿新 • • 發佈：2019-01-15

效果如圖所示：

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<body>
<canvas width="1000" height="1000" id="myCanvas"></canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext('2d');
context.fillStyle = 'rgb(255,0,0)';
context.lineWidth = 5;
context.strokeRect(0,0,1000,1000);
//繪圖的起始點，也就是五角星的頂點座標
var x=100,y=100;
for(var i=0;i<9;i++)
{
context.beginPath();
//五角星邊的長度為100px，x1、h2為五角星的底部點座標偏差值，x2、h2為五角星上部點偏差值
var x1 = 100*Math.sin(Math.PI/10);
var h1 = 100*Math.cos(Math.PI/10);
var x2 = 50;
var h2 = 50*Math.tan(Math.PI/5);
context.lineTo(x+x1,y+h1);
context.lineTo(x-50,y+h2);
context.lineTo(x+50,y+h2);
context.lineTo(x-x1,y+h1);
context.lineTo(x-x1,y+h1);
context.lineTo(x,y);
context.closePath();
context.fill();
x=(i+2)*100;
y=100;
context.moveTo(x,y);
}
</script>
</body>
</html>

HTML Canvas 繪製五角星

效果如圖所示：程式碼如下： <!DOCTYPE html> <html lang="en"> <body> <canvas width="1000" height="1000" id="myCanvas"></ca

canvas 繪製五角星

練習canvas，跟著教材做一個繪製五角星的特效，大家可以複製程式碼在本地檢視效果。分析：五角星有十個定點，五個外頂點，五個內頂點，可以看成頂點分別在兩個圓上，其中假設外頂點所在圓的

HTML 5 Canvas 繪製圖形影象

HTML5 Canvas HTML5 <canvas> 標籤定義圖形，比如圖表和其他影象，必須使用指令碼來繪製圖形。<canvas> 是 HTML 5 中的新標籤。 <canvas> 元素本身並沒有繪製能力，它僅僅是圖形的容器/畫布，必須使用指令碼(Jav

Canvas繪製正多邊形及五角星

一般常用的繪圖技術有三種：Svg,Canvas和WebGL 在正式使用Canvas繪製多邊形及五角星之前，請允許我向大家簡單的介紹下Canvas繪圖之路徑的基本語法結構 ctx.beginPath() -------- 開始一條新路徑 ctx.closePath() -

android使用canvas畫線，位移，旋轉，繪製五角星

為了提高自己的開發水平，就想系統地學習一下Android自定義控制元件。首先呢就要從Paint和canvas學起了，與本文主題相關的有關於canvas的畫線：

html canvas-nest.js 源碼

存儲 png 進行 cti child 效果 nod rect 透明度 // canvas_width || r.x < 0 ? -1 : 1, r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰

[React] Work with HTML Canvas in React

pil nbsp sso spl des automatic monit related overflow React‘s abstraction over the DOM means that it‘s not always obvious how to do DOM-r

HTML Canvas基本概念

javascript canvas web Canvas Canvas元素是HTML5新家的元素，這個元素負責在頁面中設定一個區域，然後就可以通過Javascript動態地在這個區域中繪制圖形基本用法使用canvas元素時，必須先設置其width屬性和height屬性，指定繪圖區域的大小。出現

html canvas 化一個彩虹

</<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head>

canvas繪製動態電子錶

電子錶線上地址:點選開啟連結電子時鐘截圖動態電子錶實現思路1.利用陣列繪製不規則圖形需要繪製的圖形有 0 1 2 3 4 5 6 7 8 9 : 要繪製的圖形陣列為[0,0,1,1,1,0,0],

Canvas繪製圖形

1.Android 利用canvas畫各種圖形(點、直線、弧、圓、橢圓、文字、矩形、多邊形、曲線、圓角矩形) 參考： https://blog.csdn.net/u013831257/article/details/50556098 https://blog.csdn.net/qq_2175

canvas繪製圖形——圓弧與圓形

canvas 繪製圓弧繪製圓弧使用 context.arc( ) 函式，包含六個引數。 context.arc( centerx,centery,radius, startingAngle,endingAngle, anticlockwise = false )

canvas繪製圖形——直線、多邊形、七巧板

前言 canvas 是 html5 中的一個新元素，主要用於圖形的繪製，通過 JavaScript 來控制。<canvas> 標籤定義一個圖形容器，也可以叫做畫布，通過 js 指令碼可以繪製出各種各樣的影象。建立canvas 建立 canvas 只需要新增 canv

js驗證碼實現---使用Canvas繪製一個隨機改變的驗證碼圖片

使用Canvas繪製一個隨機改變的驗證碼圖片,如下圖 var str = 'ABCDEFGHJKLMNPQRSTWXY3456789'; var char = str[ 0~字串長度間的隨機數 ];

android canvas 繪製 Cirle 以外的區域為指定顏色

今天的內容主要是android.graphics.PorterDuff.Mode 有個需求類似： canvas上繪製圓以外的區域為alpha透明度的黑色，圓內區域為透明：實現原理很簡單，就是把整個canvas畫成alpha透明度的黑色， canvas.drawARGB(alp

JS canvas繪製五子棋的棋盤

本文為大家分享了JS canvas繪製五子棋棋盤的具體程式碼，供大家參考，具體內容如下 box-shadow:給元素塊周邊新增陰影效果。語法：box-shadow: h-shadow v-shadow blur spread color inset； h-shadow: （必

測試canvas繪製旋轉文字的效能

　　canvas 繪製各種動畫效果時，我們經常會使用畫布旋轉，使繪製上去的元素有旋轉的效果。　　最近在專案中碰到了很嚴重的效能問題，經常排查發現是因為繪製批量文字時使用了畫布旋轉，且每行文字的旋轉角度是不一樣的，每次繪製前都會去動態的改變畫布上下文context的旋轉角度值，導致CPU佔用太多。　　而

Android自定義View——canvas 繪製一個會動的時鐘

文章目錄 ####1、功能例項用canvas 繪製一個會動的指標式時鐘 ####2、程式碼架構 ####3、主要功能程式碼 activity_main.xml 檔案 <?xml version="1.0" encodin

小程式利用canvas 繪製幸運大轉盤

小程式對 canvas api 跟h5的不太一致，所以這個搞的比較久，不多說，先貼程式碼 Page({ /** * 頁面的初始資料

canvas繪製鬧鐘-方法2

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

HTML Canvas 繪製五角星

相關推薦