您現在的位置是:電腦技術吧?>? 編程技術 ??>??css對canvas,canvas加入css??>??正文詳情

css對canvas,canvas加入css

昝冰夏2019-11-20 19:41:42 人圍觀
簡介canvas和js。。。Erase rectangle clearrect (x火狐css3和canvas

現把canvas的知識點總結如下,以便隨時查閱。

  1、填充矩形 fillRect(x,y,width,height);  2、繪制矩形邊框 strokeRect(x,y,width,height);  3、擦除矩形 clearRect(x,y,width,height);  4、填充樣式 fillStyle=red; 樣式可以為顏色、漸變和圖像。

  5、描邊樣式 strokeStyle=red;  6、描邊線條的寬度 lineWidth=4;  7、線條末端形狀 lineCap=butt; butt(對接)/round(圓)/square(方),默認情況下是butt;  8、線條相交樣式 lineJoin=miter; miter(尖角)/round(圓角)/bevel(斜角),默認尖角;  9、開始繪制路徑 beginPath();  10、結束路徑 closePath(); 創建路徑后,如果想繪制一條連接到路徑起點的線條,可以調用closePath();  11、繪制圓弧 arc(x,y,radius,startAngle,endAngle,true/false);  12、繪制弧線 arcTo(x1,y1,x2,y2,radius) 從上一點開始繪制一天弧線,到x2,y2為止,并且以給定的半徑radius穿過x1,y1;  13、moveTO(x,y); 將繪圖游標移動到(x,y),不畫線  14、lineTo(x,y); 從上一點開始繪制一條直線  15、二次貝塞爾曲線: quadraticCurveTo(cx,cy,x,y); 從上一點開始繪制二次曲線,到x,y為止,cx,cy作為控制點。

  16、三次貝塞爾曲線: bezierCurveTo(cx1,cy1,cx2,cy2,x,y); 從上一點開始繪制二次曲線,到x,y為止,cx1,cy1和cx2,cy2作為控制點。

  17、rect(x,y,width,height);從點x,y開始繪制矩形,寬度和高度分別由width和height指定。

這個方法繪制的是矩形路徑,而不是獨立形狀。

  18、繪制文本:  (1) 填充文本:fillText(hello,x,y,width);width為可選的最大像素寬度,如果文本大于最大寬度,則文本會收縮以適應最大寬度。

  (2) 文本描邊:strokeText(hello,x,y,width);width為可選的最大像素寬度。

  (3) 文本樣式:font=bold 14px Arial;  (4) 水平文本對齊:textAlign='start'; // start, end, left,right, center。

默認值:start。

以文字的起始點(x,y)為基點的縱軸進行對齊。

  (5) 垂直文本對齊:textBaseline='alphabetic'; //top, hanging, middle,alphabetic, ideographic, bottom。

默認值:alphabetic。

以文字的起始點(x,y)為基點的橫軸進行對齊。

  (6) 文本的寬度:var text=hello; var length=context.measureText(text);參數text為所需要繪制的文字  19、變換  (1) rotate(angle):圍繞原點旋轉圖像angle弧度。

  也可以使用transform(Math.cos(angle*Math.PI/180),Math.sin(angle*Math.PI/180),-Math.sin(angle*Math.PI/180),Math.cos(angle*Math.PI/180),0,0);  (2) scale(x,y):縮放圖像。

也可以使用transform(x,0,0,y,0,0);  (3) translate(x,y):將坐標原點移動到x,y,執行這個變換之后,坐標0,0會變成之前由x,y表示的點。

也可以使用transform(1,0,0,1,x,y);  (4) transform(, , ,,x, y);  (5) setTransform(, , ,,x, y);將變換矩陣重置為默認狀態,然后再調用transform();  20、圖形組合  代碼如下:  context.fillStyle=blue;  context.fillRect(10,10,100,100);  context.globalCompositeOperation='lighter'; 可選值如/* */內。

  context.fillStyle=red;  context.arc(110,60,50,0,Math.PI*2,false);  context.fill();  /*  source-over(默認值):  destination-over:在原有圖形之下繪制新圖形  source-in:新圖形與原有圖形作in運算,只顯示新圖形中與原有圖形相重疊的部分  destination-in:原有圖形與新圖形作in運算,只顯示新圖形中與原有圖形相重疊的部分  source-out:新圖形與原有圖形作out運算,只顯示新圖形中與原有圖形不重疊的部分  destination-out:新圖形與原有圖形作out運算,只顯示新圖形中與原有圖形不重疊的部分  source-atop:只繪制新圖形中與原有圖形重疊的部分和未被重疊的原有圖形  destination-atop:只繪制原有圖形中被新圖形重疊的部分和新圖形的其他部分  lighter:原有圖形與新圖形均繪制,重疊部分做加色處理  xor:只繪制新圖形與原有圖形不重疊的部分,重疊部分變透明  copy:只繪制新圖形  */  21、繪制圖形陰影  代碼如下:  context.shadowOffsetX=10; //陰影的橫向位移量  context.shadowOffsetY=10; //陰影的縱向位移量  context.shadowColor='rgba(100,100,100,0.5)'; //陰影的顏色  context.shadowBlur=7; //陰影的模糊范圍  22、繪制、平鋪、裁剪圖像  代碼如下:  context.drawImage(image,x,y);  context.drawImage(image,x,y,w,h);  context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);sx,sy和sw,sh為源圖像的被復制區域的起始坐標和高度,dx,dy和dw,dh為復制后的區域的目標坐標和高度。

  context.createPattern(image,type);圖像平鋪,參數可以為:no-repeat,repeat-x,repeat-y,repeat;  context.clip(); //裁剪功能  例子:  代碼如下:  image=new Image(); //創建Image對象  image.src=../images/wukong.gif;  var test=context.createPattern(image,'repeat-y');//createPattern設置平鋪效果,  context.fillStyle=test;  context.fillRect(0,0,400,400);  image.onload=function() { //此方法的作用是,如果圖片是比較大的網絡圖像文件,防止圖像全部裝載完畢才看見該圖像,這樣就可以一邊裝載一邊繪制了。

  drawImg(context,image);  }  function drawImg(context,image){  //繪制原始圖像  context.drawImage(image,10,10,125,125);  //局部放大  context.drawImage(image,20,0,90,100,150,10,125,125);  context.rect(20,20,80,80);  context.clip();  context.drawImage(image,0,0,200,200);  }  23、保存、恢復  contex.save();將當前狀態保存到棧中。

注意:保存的只是對繪制圖形的設置和變換,不會保存繪制圖形的內容。

  context.restore();從棧中取出之前保存的圖形狀態  可以應用的場合:  (1)圖像或圖形變形  (2)圖像裁剪  (3)改變圖形上下文時屬性時:fillStyle,font,globalAlpha,globalComposite-Operation,lineCap,lineJoin,lineWidth,miterLimit,shadowBlur,shadowColor,  shadowOffsetX,shadowOffsetY,strokeStyle,textAlign,textBaseline  24、線性漸變  代碼如下:  var g=context.createLinearGradient(xStart,yStart,xEnd,yEnd);  var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);  g.addColorStop(0,'red');  g.addColorStop(0,'green');  context.fillStyle=g;  context.fillRect(0,0,200,200);

版權聲明:本文由 昝冰夏 整理編輯。

原標題:csscanvashtml5,canvas和css3

轉載注明出處:http://www.dn9ww09s.icu/program/13861.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 蘋果face time有用嗎,iphone打facetime收費嗎

    蘋果face time有用嗎,iphone打facetime收費嗎 相關圖片facetime收錢碼FaceTime是蘋果手機內置的通訊軟件。。FaceTime需要錢嗎?Next, Superman software editor would like to 蘋果facetime怎么計費...

  • GIF,gif動態圖第六八

    GIF,gif動態圖第六八 相關圖片泡茶杯下面小編就為大家介紹flash AS3,使茶杯的GIF動畫效果搖曳起來。這個教程很好,也很簡單。我們一起學吧!效果如下:(鼠標指向右邊茶壺可以看到震動效果)制作玻璃茶杯...

  • 取色器工具,取色器怎么用

    取色器工具,取色器怎么用 相關圖片帶取色器的軟件在日常的平面設計或繪畫中,我們需要在其他的材料上畫出顏色,而顏色選擇器會幫我們很多忙。通用屏幕顏色選擇器可以讀取屏幕上任何點的顏色,并將其轉換為RGB和...

  • 有道翻譯官怎么收費,有道翻譯官同傳怎么用

    有道翻譯官怎么收費,有道翻譯官同傳怎么用 相關圖片有道翻譯官ar如何開啟如今,隨著國家的發展,人們有了旅游的錢,但不可避免地會遇到語言障礙的情況。這時,只要有翻譯,這個問題就可以解決。那你怎么用呢?現在,超人軟件編輯...

  • 網頁排版,網頁排版模板

    網頁排版,網頁排版模板 相關圖片網頁排版設計軟件為了讓您了解CSS的作用,以及為什么要使用CSS而不是HTML表來進行web頁面布局,下面的示例向您解釋一個頁面是用HTML格式化的,另一個頁面是用CSS格式化網頁顯示排版不...

  • 百度網盤flv視頻打不開,flv格式如何播放

    百度網盤flv視頻打不開,flv格式如何播放 相關圖片flv格式可以在電腦上播放嗎在網絡流媒體格式中,FLV格式是最常見的,大多數網絡視頻都是以FLV格式下載的。那么,FLV格式使用什么播放器來打開它呢?這里有幾個好的flv播放器推薦F...

  • 元素hr,化學hr

    元素hr,化學hr 相關圖片hr是干嘛的定義以繪制水平線繪制水平規則。注意:此元素在Internet Explorer 3.0及更高版本的HTML中可用,在Internet Explorer 4.0及樂元素 面試...

  • 浙工院app,i浙工院app

    浙工院app,i浙工院app 相關圖片i浙工院閃退浙江理工學院是浙江理工學院為學生開發的軟件。很多新同學和朋友反映,他們不知道如何使用浙江理工學院的應用程序。現在,超人軟件編輯就為大家介紹一下浙江理工學...

  • 雨中冒險2怎么刷月亮,qq怎么刷星星月亮

    雨中冒險2怎么刷月亮,qq怎么刷星星月亮 相關圖片qq的太陽星星怎么刷Shiba是一個非常好的實時軟件。當你成為錨后,你可以通過升級你的評級到月亮或太陽來賺取更多的錢。那怎么刷月亮和太陽呢?現在,超人軟件編輯也想介紹一下如...

  • 什么的輪廓,耳輪廓

    什么的輪廓,耳輪廓 相關圖片輪廓度拿個手電筒在黑暗中向相機揮動,拍一張光軌的照片。這種沒有繪畫的輕涂鴉很受歡迎。它的魅力不僅體現在黑暗中耀眼的光輝上,更體現在人們對一幅隨時都會幻滅的美麗畫卷...

熱評文章

  • 漫漫人生路上少不了朋友,成功的路上少不了朋友和敵人

    漫漫人生路上少不了朋友,成功的路上少不了朋友和敵人 相關圖片成功需要朋友有時候很孩子氣,想和朋友開個小玩笑,那么語音軟件就可以滿足你的需求了。。It's the most fun to change the voice into a與朋友見面散文...

  • 標簽style,標簽內的style

    標簽style,標簽內的style 相關圖片style屬性值HTML樣式標記樣式標記—在文檔中聲明樣式時,標記樣式標記成對使用,以結束包含內容的屬性media--media type,type--type,通常使用typstyle...

  • 魔獸世界第七軍團聲望,魔獸世界

    魔獸世界第七軍團聲望,魔獸世界 相關圖片魔獸世界軍團再臨劇情。。?Now, Superman software editor also wants to introduce the devil to you魔獸世界聯盟...

  • 炫光效果怎么做,炫光效果

    炫光效果怎么做,炫光效果 相關圖片炫光反應。。設置畫筆大小,軟化邊緣,并使用畫筆工具在畫布中繪制,如圖3所示。。。Create a new rectangular box, and fill it抑制炫光...

  • 快奪寶,奪寶

    快奪寶,奪寶 相關圖片最正規的一元奪寶51戰利品是一款手機軟件,在這款軟件中,用戶只需花1元錢即可進行戰利品。那么51個搶劫犯呢??。連環奪寶...

  • 1px是多少像素,1px像素

    1px是多少像素,1px像素 相關圖片一個像素是多少毫米最近,我們都使用表來創建網頁中像素為1的wordlink﹣affiliate表,這似乎是一件非常簡單的事情。直接插入表格并將表格邊框設置為1?嘗試過的朋友必須知1px是多少...

  • 抖音怎么抖屏,抖音抖屏

    抖音怎么抖屏,抖音抖屏 相關圖片抖音短視頻怎么抖屏幕自助餐短片具有酷炫的特效和易用的編輯功能,收獲了大量用戶。?。Interested partners don't want to抖音和別人和屏怎么辦...

  • 摩拜單車,摩拜單車怎么用

    摩拜單車,摩拜單車怎么用 相關圖片摩拜單車月卡環保幣是摩比單車推出的虛擬幣,用戶可以通過它在摩比成就博物館兌換獎品。如何獲得摩比自行車綠色資金?現在,超人軟件編輯也想介紹一下如何玩Moby Android成摩拜共...

  • HTML元素,html5元素

    HTML元素,html5元素 相關圖片html行內元素有哪些定義表示定義列表中的定義。定義通常縮進在定義列表中,表示定義列表中的定義。這個定義通常在html列表元素...

  • 拼多多活動中怎么取消,拼多多萬人團不滿就取消嗎

    拼多多活動中怎么取消,拼多多萬人團不滿就取消嗎 相關圖片必要拼團訂單可以取消嗎品多多是一款非常常用的團購軟件。在這個軟件中,你可以通過團購以優惠的價格購買商品。如果您不滿意,可以申請退貨。品多多怎么能取消品團呢?現在,...

關注微信

变脸官网查询