2. 程式人生 > >canvas--哆啦A夢

canvas--哆啦A夢

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

學習canvas時畫的一個哆啦A夢，還有不足，以後改進
具體實現程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #mycav{
            border:1px solid red;
        }
    </style>
</head>
<body>
<canvas
 
 id="mycav" width="800" height="600"></canvas>
<script>
    var cav = document.getElementById('mycav');
    var can = cav.getContext('2d');

    can.beginPath();
    can.strokeStyle = '#000';
    can.fillStyle = '#00A0E8';
    can.arc(300,280,100,(2/3)*Math.PI,(1/3)*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();

    can.beginPath();
    can.strokeStyle = '#000'
 
;
    can.fillStyle = '#fff';
    can.arc(300,300,80,(2/3)*Math.PI,(1/3)*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();
    /*
    * context為Canvas的2D繪圖環境物件，
    * x為橢圓中心橫座標，
    * y為橢圓中心縱座標，
    * a為橢圓橫半軸長，
    * b為橢圓縱半軸長。
    */
    function ParamEllipse(context, x, y, a, b)
    {
        //max是等於1除以長軸值a和b中的較大者
 

        //i每次迴圈增加1/max，表示度數的增加
        //這樣可以使得每次迴圈所繪製的路徑（弧線）接近1畫素
        var step = (a > b) ? 1 / a : 1 / b;
        context.beginPath();
        context.moveTo(x + a, y); //從橢圓的左端點開始繪製
        for (var i = 0; i < 2 * Math.PI; i += step)
        {
            //引數方程為x = a * cos(i), y = b * sin(i)，
            //引數為i，表示度數（弧度）
            context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
        }
        context.closePath();
        context.stroke();
    }

    can.beginPath();
    can.fillStyle = '#fff';
    can.strokeStyle = "#000";
    ParamEllipse(can,280,220,15,20);
    can.stroke();
    can.fill();
    can.closePath();

    can.beginPath();
    can.fillStyle = '#fff';
    can.strokeStyle = "#000";
    ParamEllipse(can,310,220,15,20);
    can.stroke();
    can.fill();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.arc(282,225,5,0,Math.PI,true);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.arc(308,225,5,0,Math.PI,true);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#CC0D30";
    can.arc(295,250,15,0,2*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();

    can.beginPath();
    can.fillStyle = "#fff";
    can.arc(293,247,6,0,2*Math.PI);
    can.fill();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(297,265);
    can.lineTo(300,320);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(275,270);
    can.lineTo(230,250);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(275,280);
    can.lineTo(220,280);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(275,290);
    can.lineTo(230,310);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(320,270);
    can.lineTo(360,250);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(320,280);
    can.lineTo(370,280);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(320,290);
    can.lineTo(360,310);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.arc(300,270,50,0,Math.PI);
    can.stroke();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#E5012D";
    can.fillRect(250,365,100,10);
    can.stroke();
    can.fill();
    can.closePath();
    /*肚子*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#00A0E8";
    can.arc(300,443,80,-(1/3)*Math.PI,(4/3)*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();
    /*口袋*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#fff";
    can.arc(300,418,50,-(1/3)*Math.PI,(4/3)*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();

    can.beginPath();
    can.strokeStyle = "#000";
    can.moveTo(270,418);
    can.lineTo(330,418);
    can.stroke();
    can.closePath();
    can.beginPath();
    can.strokeStyle = "#000";
    can.arc(300,418,30,0,Math.PI);
    can.stroke();
    can.closePath();
    /*左胳膊半圓*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#00A0E8";
    can.arc(250,375,10,-(5/6)*Math.PI,(1/3)*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();
    /*左胳膊矩形*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#00A0E8";
    can.rotate(-40*Math.PI/180);
    can.rect(-133,438,80,20);
    can.stroke();
    can.fill();
    can.closePath();
    /*左胳膊圓*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#fff";
    can.arc(-133,450,13,0,2*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();
    /*右胳膊半圓*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#00A0E8";
    can.arc(31,515,10,-(7/6)*Math.PI,(1/6)*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();
    /*右胳膊矩形*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#00A0E8";
    can.rotate(90*Math.PI/180);
    can.rect(520,-42,80,20);
    can.stroke();
    can.fill();
    can.closePath();
    /*右胳膊圓*/
    can.beginPath();
    can.strokeStyle = "#000";
    can.fillStyle = "#fff";
    can.arc(600,-34,13,0,2*Math.PI);
    can.stroke();
    can.fill();
    can.closePath();
</script>
    </body>
</html>

相關推薦

canvas--哆啦A夢

學習canvas時畫的一個哆啦A夢，還有不足，以後改進 具體實現程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title

python3裡tkinter 中 canvas（畫板）案例之哆啦A夢

from tkinter import * window = Tk() window.title("tkinter") #視窗的標題 window.geometry("800x600") #視窗的大小 canvas = Canvas(window,width = 7

Windows程序設計畫圖實現哆啦A夢

erl object rbac eight number spa raw jpg date 在看雪論壇上看到的一個帖子，很喜歡，轉載一下。原文地址：http://bbs.pediy.com/showthread.php?t=138630哆啦A夢是畫出來的，不知道作者算這些坐

實驗吧-隱寫-大雄和哆啦A夢 -WP

一個 繼續 dd命令 win es2017 ctf .com blog 通過 鏈接：http://ctf5.shiyanbar.com/stega/base.jpg 老套路 binwalk 發現裏面有一個RAR壓縮文件 通過dd命令把它分離出來 dd if=base.j

[css]我要用css畫幅畫(七) - 哆啦A夢

順序 tar car 輸入 url bsp 完成 難度 tool 原文鏈接 接著之前的[css]我要用css畫幅畫(六)，今天畫的有所不同，畫的是哆啦A夢，我們小時候對他的稱呼其實是小叮當機器貓。 （PS:這次我要做的事情，很多人已經做過，這並不是什麽創新，我只是在學習並記

用AR造出哆啦A夢任意門，QQ如何在世界杯賽場上“秀肌肉”

品牌 text 創造性 神經網絡 ai技術 道具 str 實驗室 以及 在這個世界杯刷屏的夏天，相信有不少球迷苦於無法去現場又不滿足隔著屏幕觀戰，暗暗祈禱能有一個哆啦A夢的“任意門”，瞬間就來到千裏之外的俄羅斯。現在，這扇任意門已經被創造出來了，不過創造者不是哆啦A夢這個“

#哆啦A夢

ear pri rac 3.6 goto pos ext 技術分享 dong !/usr/bin/env python3 -- coding: utf-8 -- @Author: dong dong @Env: python 3.6 from turtle import *

《windows程序設計》哆啦A夢（10）

use inf rect 菜單 wm_paint toc arc begin col 代碼如下： program Project2; {$APPTYPE CONSOLE} {$R *.res} uses System.SysUtils, windows,

Word神器！輸入幾個字你想要啥都能給你！就是哆啦A夢的口袋啊！

今天小編教大家一個word神奇功能，你想要什麼就有什麼，當你輸入幾個字，點選【F3】，就能自動彈出你想要的內容，是不是很神奇，這一款功能，他的名字叫做【自動圖文集】。我們來看看吧！   1. 如圖效果顯示，當我們在word的輸入"個人簡歷，"就能自動彈出一份簡歷模板，輸入"房

教你利用Python把圖片轉字元畫！程式碼哆啦A夢你見過嘛？

圖片轉字元畫的關鍵是把圖片的灰度值與自定義的字符集之間建立對映關係，不同區間的灰度值對應不同的字元，之後將圖片每一個畫素對應的字元打印出來，就是我們要的字元畫。 我們可以使用灰度值公式將畫素的 RGB 值對映到灰度值： gray ＝ 0.2126 * r +

Windows程式設計——畫一隻哆啦A夢

 本文為一Windows程式設計API繪圖實戰小例子，學習自嗶哩嗶哩小甲魚的《Windows程式設計SDK》。最終效果展示： 原始碼在最後，跟著小甲魚老師敲一遍程式碼，這些API能記住不少。  一、大體脈絡

大雄和哆啦A夢WP（實驗吧-隱寫術）

前言： 本文是實驗吧訓練題庫裡隱寫術部分的一道題：“大雄和哆啦A夢”的Write Up. 解題檔案： 解題檔案是一張圖片 看到是圖片，首先想到用Stegsolve檢視是不是有隱藏的二維碼——但是並沒有發現二維碼。 之後在Stegsolve中依次開啟”Analyse-&g

調色x愛你最好的距離-哆啦a夢與銅鑼燒

(4) 文字說明這次把二個加分作業的主題融合在一起，因為這二個主題都是使用slider，所以就把哆啦a夢和他最愛的銅鑼燒融合進去了，而操控最下面那條slider，可以讓二張圖片靠近或者遠離，而愛心也會因應著情況顯示完整或者碎裂的心。(5) 重點程式碼講解基本上就是把照片和Label以及Slider拉近程式碼當

css3+html5——機器貓哆啦A夢+手、腳、頭動起來！

看起來難實則簡單的哆啦A夢設計，調格式需要有耐心哦！效果如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

哆啦A夢藍胖子來啦，html5+div+css3程式碼繪製機器貓

哆啦A夢藍胖子來啦，之前就有大神畫過藍胖子。本站隆重推出機器貓超盟版。現在主流瀏覽器對css3支援良好，您可以通過Chrome,Firfox,Safari,IE9+等瀏覽器完美預覽。本站後期將推出動畫版本，盡請期待！ 其他主題推薦：

用Python的Turtle畫哆啦A夢

這是我幾年前為了練習python的turtle庫而畫的，今天翻出了程式碼，分享給大家。 這是我初學python時畫的，當時還沒有面向物件的概念，也沒有采取類方法之類，純原始手工，供大家參考。 若有興趣可以自行優化簡潔程式碼，有時間我也會重新寫一遍。 畫出來的效果如下圖：

python3 turtle 繪製哆啦A夢

是使用pythonde turtle畫的一個小豬佩奇，於是自己跟著畫了一個哆啦A夢，算是隻實現了頭部的部分吧，如果有時間了會把程式碼改進。原始碼附上：import turtle as timport math as m t.pensize(4) # 設定畫筆的大小t.colo

純CSS畫圖——哆啦A夢

最近突然想用前端程式碼畫圖，然後就去百度找了一張哆啦A夢的圖片，用DIV+CSS畫，雖然最後的結果還是有些差異，不過也就差不多可以看啦~ dlam.html <!DOCTYPE html> <html> <head> <me

手把手教你製作一張哆啦A夢的桌布

可愛的桌布總是會受到大家的喜歡，那麼如何製作一個簡單的桌布呢？跟著原始碼時代UI老師一起動起來吧！ 最終效果預覽： 使用軟體：Adobe PhotoShop CC2017 方法步驟 第一步：開啟Adobe PhotoShop CC2017軟體並新建畫布，設定檔

哆啦A夢主題樂園，一定要去！

此訊息僅適用於北京和上海的朋友： 哆啦A夢主題樂園暑期來到中國了！7月在上海，8月在北京。已經有參加過釋出會的人放出了圖文介紹～～～ 官方的介紹是這樣的： 樂園依據漫畫、動畫片場景和情節設計，以哆啦A夢的歷險故事為主題，通過立體大型氣墊、動畫播映、動畫片背景攝影等遊戲與活動，