HTML5---Canvas-畫線，空心圖，矩形，文字，三角形，旋轉圖片

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

</pre><pre name="code" class="html"><!doctype html>
<html>
<head></head>
<body>
<canvas width="800" height="800" style="background:#888"  id="canvas">
	您的瀏覽器當前版本不支援canvas標籤
</canvas>
<script>
	//獲取畫布DOM  還不可以操作
	var canvas=document.getElementById('canvas');

	//設定繪圖環境
	var cxt=canvas.getContext('2d');

	
	//畫一條線段。		
		cxt.beginPath();	//開啟新路徑				
		cxt.lineWidth=10;	//設定畫筆的寬度				
		cxt.strokeStyle="red"; //設定畫筆的顏色				
		cxt.moveTo(20,20);	//設定筆觸的位置				
		cxt.lineTo(100,20);	//設定移動的方式				
		cxt.stroke();		//畫線				
		cxt.closePath();	//封閉路徑
		
		
	//畫一個空心圓形  凡是路徑圖形必須先開始路徑，畫完圖之後必須結束路徑				
		cxt.beginPath();				
		cxt.lineWidth=3;	//重新設定畫筆
		cxt.strokeStyle="green";
		cxt.arc(200,200,50,0,360,false);
		cxt.stroke();
		cxt.closePath();
		
	//畫一個實心圓形
		cxt.beginPath();				
		cxt.fillStyle="rgb(255,0,0)";	//設定填充的顏色
		cxt.arc(200,100,50,0,360,false);
		cxt.fill();
		cxt.stroke();
		cxt.closePath();
		
	//畫一個矩形
		cxt.beginPath();
		cxt.rect(300,20,100,100);
		cxt.stroke();
		cxt.closePath();				
		cxt.strokeRect(300,150,100,100);	//其他方法 建議使用此方式
		
		//實心矩形
		cxt.beginPath();
		cxt.rect(300,270,100,100);
		cxt.fill();
		cxt.closePath();
		cxt.fillRect(300,390,100,100);
		
	//設定文字
		cxt.font="40px 宋體";	//css font屬性
		cxt.fillText("canvas",20,300);				
		cxt.lineWidth=1;		//將筆觸設定為1畫素
		cxt.strokeText("canvas",20,350);
		
	//畫圖 把一幅圖片畫到畫布中  注意webkit核心的瀏覽器 chrome和獵豹不支援
		var img =new Image();
		img.src="xiaomm.jpg";
		cxt.drawImage(img,20,370,230,306);
		
	//畫一個三角形
		cxt.beginPath();				
		cxt.moveTo(300,500);	//移動至開始點
		cxt.lineTo(300,600);
		cxt.lineTo(400,550);
		cxt.closePath();//填充或者畫路徑需要先閉合路徑再畫
		cxt.stroke();
	
	//實心
		cxt.beginPath();				
		cxt.moveTo(300,600);	//移動至開始點
		cxt.lineTo(300,700);
		cxt.lineTo(400,650);
		cxt.closePath();
		cxt.fill();
		
	//旋轉條形
		//設定旋轉環境
		cxt.save();					
		cxt.translate(10,10);	//在異次元空間重置0,0點的位置
		cxt.rotate(-350*Math.PI/180);	//設定旋轉角度  引數是弧度  角度 0-360 弧度=角度*Math.PI/180
		cxt.lineWidth=10;	//旋轉一個線段
		cxt.beginPath();
		cxt.moveTo(0,0);
		cxt.lineTo(20,100);
		cxt.stroke();
		cxt.closePath();
		//將旋轉之後的元素放回原畫布
		cxt.restore();
		
	//旋轉圖片
		cxt.save();
		cxt.translate(20,370);
		cxt.rotate(-50*Math.PI/180);
		
		var img = new Image();
		img.src="ccc.jpg";
		cxt.drawImage(img,0,0,230,306);
		cxt.restore();
	
	
	//上面程式碼會產生一個小圓點，每隔30毫秒就向右下方移動的效果。setInterval函式的一開始，之所以要將畫布重新渲染黑色底色，是為了抹去上一步的小圓點先上升後下降
		/*
		var posX = 20,
		posY = 100;

	setInterval(function() {
		cxt.fillStyle = "black";
		cxt.fillRect(0,0,canvas.width, canvas.height);

		posX += 1;
		posY += 0.25;

		cxt.beginPath();
		cxt.fillStyle = "white";

		cxt.arc(posX, posY, 10, 0, Math.PI*2, true); 
		cxt.closePath();
		cxt.fill();
	}, 30);
	*/

</script>



</body>
</html>

HTML5---Canvas-畫線，空心圖，矩形，文字，三角形，旋轉圖片

</pre><pre name="code" class="html"><!doctype html> <html> <head></head> <body> <canvas widt

推薦：js用canvas畫水平曲線走勢圖，圖線自適應垂直高度

主要的畫曲線走勢的js檔案jquery.flot.js，下載地址https://static.bichuang.com/static/front/js/plugin/jquery.flot.js !function(t){t.color={},t.color.make=f

使用canvas畫線，在Js中動態設定高和寬

1.定義div <div style="height:240px;" > &

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

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

canvas 畫線

document rgba pla lan border draw ctx 多邊形正方一、canvas是基於狀態的繪圖環境 1、canvas是基於狀態的繪制 context.moveTo(100,100); context.lineTo(700,700); co

canvas畫線API實現簡單地圖

做一個青海專案時，涉及到地圖，簡單顯示青海省個地區的用了一個svg外掛，要求顯示熱點資料的就用了百度的地圖API。地圖的確高大上。回顧一、後臺老大哥負責跟客戶溝通的，突然有一天客戶要求說登入頁顯示地區的地圖要有3D效果。心裡頓時有一萬匹草泥馬奔過~~

HTML5 canvas電子簽名與截圖

一：效果圖二：頁面程式碼 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l

canvas畫水平曲線走勢圖

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <met

HTML5 Canvas實現360度全景圖

很多購物網站現在都支援360實物全景影象，可以360度任意選擇檢視樣品，這樣對購買者來說是一個很好的消費體驗，網上有很多這樣的外掛都是基於JQuery實現的有收費的也有免費的，其實很好用的一個叫3deye.js的外掛。該外掛支援桌面與移動終自己玩了玩這個Demo以後

html5 canvas 實現簡單繪製折線圖

<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>畫圖</title&g

Java 使用科大訊飛MSC SDK，在web服務端將文字合成語音，將pcm檔案轉為wav格式返回

本文講述的是使用科大訊飛MSC SDK將語文字合成語音，然後以web介面的形式把合成的音訊資料返回前端。流程 1、接收介面引數傳入的要合成的資料 2、使用MSC SDK把資料合成*.pcm檔案 3、獲取wav檔案格式頭 4、將格式頭與檔案內容拼接

canvas畫圖--流暢沒有齒痕的線，影象畫線

畫圖，首先要獲取滑鼠位置，當滑鼠在畫圖板上移動時，隨之畫線。 1.畫圖板canvas，監聽滑鼠事件 2.獲取滑鼠事件，得到滑鼠位置。 var mouse = {x: 0, y: 0}; //起始滑鼠位置，也就是mousedown var last_mouse = {x: 0, y: 0}; /

網頁，html5,canvas，js 動態繪製柱形圖

<!DOCTYPE html> <head><title>chart demo</title> <style> #chartContainer{

html5的canvas畫三角形和圓形，以及太極陣

//實現結合圓形畫出太極陣 <!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="500" height="500" style="backgro

PCB圖上，在Keep-out layer 層上不能畫線 ,一畫線就跳到Drill Drawing層的解決辦法

Altium 17目前對Keepout屬性進行了更新，可以有效的糾正，設計者利用Keepout作為板框的不良習慣。正確的使用方法是，切換到Keepout層，然後執行選單命令“Place -Keepout-Track”進行繪製。

Matplotlib學習---用matplotlib畫散點圖，氣泡圖（scatterplot, bubble chart）

1.4 shrink 關系 ots 讀取csv文件指南 read -- 我們 Matplotlib裏有兩種畫散點圖的方法，一種是用ax.plot畫，一種是用ax.scatter畫。一. 用ax.plot畫 ax.plot(x,y,marker="o",color="

隨機生成（x,y）資料值，並畫出散點圖

隨機生成（x,y）資料值，並畫出散點圖 import numpy as np import matplotlib.pyplot as plt r = []#生成兩個空列表 b = [] d=np.zeros((50,2)) print(d) Mean=0 STD=5 for i in r

螢幕畫筆工具Pointofix，期貨/股票覆盤分析畫線好工具

工具介紹： Pointofix可以將K線圖表定格在螢幕某一個畫面上，然後可以使用工具趨勢線、圖形，放大某個細節等，是一款很好的覆盤分析畫線工具。Pointofix使用功能： 1.高亮螢幕：手繪筆； 2.直線，箭頭和雙箭頭（按住Shift鍵,鎖定以45°遞增可選）； 3.長方形，正方形

python文字挖掘輸出權重，詞頻等資訊，畫出3d權重圖

# -*- coding: utf-8 -*- from pandas import read_csv import numpy as np from sklearn.datasets.base import Bunch import pickle # 匯入cPickle包

Unity LineRender畫線，刪除

最近在使用unity RenderLine元件來畫線或者寫字的時候發現input.mousePosition 轉化為世界座標後一直輸出攝像機的值，解決方法是保證要轉化的座標的軸和攝像機的z軸不一樣，並且不能為o；如果想用這種方式實現UI的拖拽，那就把inp

HTML5---Canvas-畫線，空心圖，矩形，文字，三角形，旋轉圖片

相關推薦