canvas畫小叮當

阿新 • • 發佈：2018-04-13

繪制 code 衣服 spa AD container margin quad fff

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>小叮當</title>
        <style>
            .container{
                margin: 0 auto;
                width: 800px;
            }
            body{
                margin: 0;
                padding:  
0;
            }
            #doraemon{
                background-color: #fff;
                display: block;
            }
        </style>
    </head>
    <body onmousemove="zuobiao(event)">
        <div class="container">
        <canvas id="doraemon" width="600" height="600"></canvas>
        </div>
        <div id="put" style="width: 50px" height="20px"; ></div>
        <script>
            window.onload 
=function(){
                var cxt=document.getElementById(‘doraemon‘).getContext(‘2d‘);
                /*繪制小叮當頭部*/
                cxt.beginPath();//開始作圖標誌
                cxt.lineWidth=1;//線寬為1
                cxt.strokeStyle=‘#000‘;//線條的顏色
                cxt.arc(200,175,175,0.7*Math.PI,0.3*Math.PI);
                cxt.fillStyle 
=‘#0bb0da‘;
                cxt.fill();
                cxt.stroke();//繪制路徑
                
                
                
                
                /*畫臉*/
                cxt.beginPath();
                cxt.fillStyle=‘#fff‘;
                cxt.moveTo(110,110);
                cxt.quadraticCurveTo(-10,200,120,315);
                cxt.lineTo(280,315);
                cxt.quadraticCurveTo(410,210,290,110);
                cxt.lineTo(110,110);
                cxt.fill();
                cxt.stroke();
                
                
                
                /*眼睛*/
                cxt.beginPath();
                cxt.lineWidth = 1;
                cxt.fillStyle = ‘#fff‘;
                cxt.moveTo(110, 110);
                cxt.bezierCurveTo(110, 25, 200, 25, 200, 100);//創建三次貝塞爾曲線,控制點1(110,25),控制點2(200,25),結束點(200,100)，也就是畫左上半橢圓
                cxt.bezierCurveTo(200, 175, 110, 175, 110, 100);//畫左下半橢圓
                cxt.moveTo(200, 100);
                cxt.bezierCurveTo(200, 25, 290, 25, 290, 100);
                cxt.bezierCurveTo(290, 175, 200, 175, 200, 100);
                cxt.fill();
                cxt.stroke();
                
                /*左眼球*/
               cxt.beginPath();
               cxt.fillStyle="red";
               cxt.arc(170,130,15,0,2*Math.PI);
               cxt.fill();
               cxt.stroke();
               
               
               /*右眼球*/
               cxt.beginPath();
               cxt.fillStyle="red";
               cxt.arc(230,130,15,0,2*Math.PI);
               cxt.fill();
               cxt.stroke();
               
               /*鼻子*/
               cxt.beginPath();
               cxt.fillStyle="red";
               cxt.arc(200,165,25,0,2*Math.PI);
               cxt.fill();
               cxt.stroke();
               
               /*胡子*/
             //左胡須
               cxt.beginPath();
               cxt.moveTo(80, 175);
               cxt.lineTo(150, 195);
               cxt.moveTo(80, 200);
               cxt.lineTo(150, 205);
               cxt.moveTo(80, 225);
               cxt.lineTo(150, 215);
        //中部胡須
               cxt.moveTo(200, 195);
               cxt.lineTo(200, 290);
        //右胡須
               cxt.moveTo(250, 195);
               cxt.lineTo(320, 175);
               cxt.moveTo(250, 205);
               cxt.lineTo(320, 200);
               cxt.moveTo(250, 215);
               cxt.lineTo(320, 225);
               cxt.stroke();
        /*嘴*/
                cxt.moveTo(80, 240);
                cxt.quadraticCurveTo(200, 350, 320, 240);
                cxt.stroke();
        
        //狗鏈
               cxt.beginPath();
               cxt.moveTo(96, 316);
               cxt.lineTo(305, 316);
               cxt.lineTo(320, 316);
               cxt.arcTo(330, 316, 330, 326, 10);//在畫布上創建介於兩個切線之間的弧，起點坐標為(330,316),終點坐標為(330,326),半徑為10
               cxt.lineTo(330, 336);
               cxt.arcTo(330, 346, 305, 346, 10);
               cxt.lineTo(81, 346);
               cxt.arcTo(71, 346, 71, 336, 10);
               cxt.lineTo(71, 326);
               cxt.arcTo(71, 316, 81, 316, 10);
               cxt.lineTo(96, 316);
               cxt.fillStyle = ‘#b13209‘;
               cxt.fill();
               cxt.stroke();
           /*下半身*/
               cxt.beginPath();
               cxt.fillStyle = ‘#0bb0da‘;
               cxt.moveTo(80, 346);
        //左衣服
               cxt.lineTo(26, 406);
               cxt.lineTo(65, 440);
               cxt.lineTo(85, 418);
               cxt.lineTo(85, 528);
               cxt.lineTo(185, 528);
        //右衣服
               cxt.lineTo(315, 528);
               cxt.lineTo(315, 418);
               cxt.lineTo(337, 440);
               cxt.lineTo(374, 406);
               cxt.lineTo(320, 346);
               cxt.fill();
               cxt.stroke();
        /*手*/
        //左手
        cxt.beginPath();
        cxt.fillStyle = ‘#fff‘;
        cxt.arc(37, 433, 30, 0, 2 * Math.PI);
        cxt.fill();
        cxt.stroke();
        //右手
        cxt.beginPath();
        cxt.fillStyle = ‘#fff‘;
        cxt.arc(363, 433, 30, 0, 2 * Math.PI);
        cxt.fill();
        cxt.stroke();
        /*肚*/
        cxt.beginPath();
        cxt.fillStyle = ‘#fff‘;
        cxt.arc(200, 400, 91, 1.8 * Math.PI, 1.2 * Math.PI);
        cxt.fill();
        cxt.stroke();
        //小口袋
        cxt.beginPath();
        cxt.fillStyle = ‘#fff‘;
        cxt.moveTo(130, 394);
        cxt.lineTo(270, 394);
        cxt.moveTo(130, 394);
        cxt.bezierCurveTo(130, 490, 270, 490, 270, 394);
        cxt.fill();
        cxt.stroke();
        /*兩只腳的空隙*/
        cxt.beginPath();
        cxt.fillStyle = ‘#fff‘;
        cxt.arc(200, 529, 20,Math.PI, 0);
        cxt.fill();
        cxt.stroke();
        /*腳*/
        //左腳
        cxt.beginPath();
        cxt.fillStyle=‘#fff‘;
        cxt.moveTo(180,528);
        cxt.lineTo(72,528);
        cxt.bezierCurveTo(52,528,52,558,72,558);
        cxt.lineTo(180,558);
        cxt.moveTo(180,558);
        cxt.bezierCurveTo(200,558,200,528,180,528);
        cxt.fill();
        cxt.stroke();
        //右腳
        cxt.beginPath();
        cxt.fillStyle=‘#fff‘;
        cxt.moveTo(220,528);
        cxt.lineTo(328,528);
        cxt.bezierCurveTo(348,528,348,558,328,558);
        cxt.lineTo(220,558);
        cxt.moveTo(220,558);
        cxt.bezierCurveTo(200,558,200,528,220,528);
        cxt.fill();
        cxt.stroke();

              
            }
            
            function zuobiao(event){
                var x=event.clientX;
                var y=event.clientY;
                var out=document.getElementById("put");
                out.innerHTML="x:"+x+"y:"+y;
            }
        </script>
    </body>
</html>

canvas畫小叮當

繪制 code 衣服 spa AD container margin quad fff <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

使用canvas 代碼畫小豬佩奇

con func out .quad math str BE pig 眼睛 <canvas id="myCanvas" width="400" height="500" style="border: 1px solid #808080; margin-l

小程序使用Canvas畫餅圖

tar lin canvas style nload raw 代碼程序 function 先上效果圖 -------------------------------------------------------------wxml代碼開始---------------

小程式使用Canvas畫餅圖

先上效果圖 -------------------------------------------------------------wxml程式碼開始--------------------------------------------------------------- <view class

小程式canvas畫雷達圖

首先，我們先看一下效果圖雷達圖（Radar Chart），又可稱為戴布拉圖、蜘蛛網圖（Spider Chart），是財務分析報表的一種。即將一個公司的各項財務分析所得的數字或比率，就其比較重要的專案集中劃在一個圓形的圖表上，來表現一個公司各項財務比率的情況，使用者能一目

微信小遊戲canvas畫布拖動圖片

新手學習，作為筆記。還請高手多多指點，謝謝。 var canvas = wx.createCanvas() var context = canvas.getContext('2d') var bgm = wx.createImage() var hero = wx.crea

微信小程式canvas 畫動態圓環百分比進度條例項根據手機螢幕寬度自適應放大縮小

這裡是wxml程式碼： <component-analysis-report active="0" bindselectReport="selectReport"></component-analysis-report> <c

2.2 canvas畫個圓，每次點選畫布，小圓向右移動1px

<body><canvas id="canvas" width="500" height="500" style="border:dashed 1px"></canvas></body><script>var can

canvas畫小球

小球 idt pat req wid () height canvas += <canvas id="can" width="600px" height="300px" style="border: 1px solid black"></canvas&g

水叮當的舞步深搜

準備整數就會是否 count() 回溯 class 所在 output 背景 Background 水叮當得到了一塊五顏六色的格子形地毯作為生日禮物，更加特別的是，地毯上格子的顏色還能隨著踩踏而改變。為了討好她的偶像虹貓，水叮當決定在地毯上跳一支輕盈的舞來賣萌~

codevs 2495 水叮當的舞步

const 地毯 output 隨著深搜 cst mes body nbsp 題目描述 Description 　　水叮當得到了一塊五顏六色的格子形地毯作為生日禮物，更加特別的是，地毯上格子的顏色還能隨著踩踏而改變。　　為了討好她的偶像虹貓，水叮當決定在地毯上跳一支輕

codevs2495 水叮當的舞步(IDA*)

amp 裏的 ogg ted mark mes -- a* memcpy 2495 水叮當的舞步時間限制: 1 s 空間限制: 32000 KB 題目等級 : 鉆石 Diamond

canvas 畫一個鐘表

document move ets center logs con pre col 直接只是作為練習，沒怎麽抽象，都放在函數裏面，只是簡單的實現。首先說下思路，將一個圓分成12份做表盤，然後用lineTo等方法話指針，最後用一個setInterval刷新畫布，讓指針每隔

用畫小狗的方法來解釋Java中的值傳遞

java 一次虛擬機 mage 新的不難修改相同完整在開始看我畫小狗之前，咱們先來看道很簡單的題目：下面程序的輸出是什麽？ Dog myDog = new Dog("旺財"); changeName(myDog); System.out.println(

canvas畫圓

基礎 als sla minutes getc ext stroke scrip ont <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti

canvas畫畫板

doc spl cal control fun lin client -m 橡皮擦制作一個畫畫板，有清屏有橡皮擦有畫筆可以換顏色 style樣式 <head> <meta charset="UTF-8"> <title>

canvas畫流程圖

body 1.3 new fill title sep ext ++ blog 用canvas畫流程圖：需求：最後一個圓圈無直線遇到問題：需要畫多個圓圈時，畫布超出顯示屏加滾動條，解決方法是<canvas>外層<div>的width=100%，且

canvas畫圓類似於鋸齒指針 angular5

旋轉 clock time 角度 body tran 新路 cancel spa 拿到圖的時候大致是這樣的，裏面的圓是有動態效果的，考慮到gif圖耗資源，於是想要用canvas畫出來；仔細看圖不難發現，這個鋸齒圓類似於表盤，計算好弧度，不難實現；因為項目現在用的框架是

canvas 畫線

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

用python畫小豬佩奇(非原創)

import CI Go col 轉換 fill begin 範圍 nco 略作改動： # coding:utf-8 import turtle as t t.screensize(400, 300, "blue") t.pensize(4) # 設置畫筆的大小 t.c

canvas畫小叮當

相關推薦