HTML5---Canvas-畫線,空心圖,矩形,文字,三角形,旋轉圖片
</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