H5之 Canvas图形实现
視頻課：https://edu.csdn.net/course/play/7621
<!DOCTYPE html>
<html>?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<body>
?? ??? ?<!--定義一個畫布?? ?-->
?? ??? ?<canvas id="mycanvas" width="100" height="100">測試瀏覽器</canvas>
?? ??? ?<!--這種寫法，js要位于html的下方-->
?? ??? ?<script language="JavaScript">
?? ??? ??? ?//根據id，來得到網頁上的畫布元素對象
?? ??? ??? ?var c=document.getElementById("mycanvas");
?? ??? ??? ?var ctx=c.getContext("2d");//2d內容
?? ??? ??? ?//1.預備;
?? ??? ??? ?ctx.beginPath();
?? ??? ??? ?//2.設置起點;,就是設置起點的(x,y)坐標
?? ??? ??? ?ctx.moveTo(10,10);
?? ??? ??? ?//3.移動到終點;
?? ??? ??? ?ctx.lineTo(100,10);
?? ??? ??? ?ctx.lineTo(10,100);
?? ??? ??? ?ctx.lineTo(100,100);
?? ??? ??? ?
?? ??? ??? ?ctx.lineTo(10,10);
?? ??? ??? ?//4.繪制輪廓;
?? ??? ??? ?ctx.stroke();
?? ??? ?</script>
?? ?</body>
</html>
圖形效果：
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<body>
?? ??? ?<script language="JavaScript">
?? ??? ??? ?//定義一個函數,類似于java的方法
?? ??? ??? ?function drawRect(){
?? ??? ??? ??? ?var c=document.getElementById("mycanvas2");
?? ??? ??? ??? ?var ctx=c.getContext("2d");
?? ??? ??? ??? ?//壓縮代碼
?? ??? ??? ??? ?ctx.fillStyle="yellow";//填充樣式
?? ??? ??? ??? ?ctx.lineWidth=10;
?? ??? ??? ??? ?ctx.strokeStyle="blueviolet";
?? ??? ??? ??? ?ctx.strokeRect(20,20,50,100);
?? ??? ??? ??? ?ctx.fillRect(20,20,50,100);
?? ??? ??? ??? ?ctx.clearRect(30,30,30,20);
//?? ??? ??? ??? ?ctx.beginPath();
//?? ??? ??? ??? ?ctx.rect(10,10,100,50);//繪制矩形
//?? ??? ??? ??? ?ctx.stroke();
?? ??? ??? ?}
?? ??? ??? ?//把自定義的函數，加到load事件監聽中
?? ??? ??? ?//addEventLister在整個頁面加載完畢去添加響應;
?? ??? ??? ?window.addEventListener("load",drawRect,true);//js可以位于上方;
?? ??? ??? ?//window.οnlοad=drawRect(); 這個還是js在下面
?? ??? ?</script>
?? ??? ?<canvas id="mycanvas2" width="500" height="500"></canvas>
?? ?</body>
</html>
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ?</head>
?? ?<body>
?? ??? ?<script>
?? ??? ??? ?function drawArc(){
?? ??? ??? ??? ?var c=document.getElementById("mycanvas3");
?? ??? ??? ??? ?var ctx=c.getContext("2d");
?? ??? ??? ??? ?ctx.beginPath();
?? ??? ??? ??? ?//起始度：弧度;這個地方不是度
?? ??? ??? ??? ?//PI 弧度=180度
?? ??? ??? ??? ?ctx.strokeStyle="red";//設置輪廓的樣式
?? ??? ??? ??? ?ctx.arc(50,50,40,Math.PI/2,2*Math.PI,false);//繪制
?? ??? ??? ??? ?ctx.stroke();
?? ??? ??? ?}
?? ??? ??? ?window.addEventListener("load",drawArc,true);
?? ??? ?</script>
?? ??? ?<canvas id="mycanvas3" width="500" height="500"></canvas>
?? ?</body>
</html>
總結
以上是生活随笔為你收集整理的H5之 Canvas图形实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql navicat编码保持一致不
- 下一篇： Canvas 渐变特效