canvas初级示例

系统管理员 2022-08-02 06:11 226阅读 0赞

<!DOCTYPE HTML>     
    <html>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <script>    
        window.onload = function()    
        \{    
            var myCanvas = document.getElementById("myCanvas");    
            var context = myCanvas.getContext("2d");    
            context.strokeStyle = "blue";    
            context.lineWidth = 3;    
            //开始画线  
            context.beginPath();    
            //画矩形  
            context.strokeRect(0,0,300,300);  
            //开始画线  
            context.beginPath();  
            //笔触颜色  
            context.strokeStyle = "red";    
            //画线起点  
            context.moveTo(50,50);    
            //画线终点  
            context.lineTo(100,100);  
            //绘制当前路径  
            context.stroke();              
   
            context.beginPath();  
            context.strokeStyle = "green";    
            context.lineWidth = 3.5;    
            context.moveTo(100,100);              
            context.lineTo(200,150);  
            context.lineTo(200,80);  
            context.stroke();

//文字示例

context.strokeStyle = "red";    
            context.lineWidth = 1;    
            context.strokeText("世界你好", 110, 200);  
        \}    
    </script>    
    <canvas id=myCanvas width=300 height=300>你的浏览器不支持canvas</canvas>    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关初级开发者：Java异常处理示例

在Java编程中，异常处理是理解和维护程序健壮性的重要手段。以下是一个简单的异常处理示例： ```java public class ExceptionHandlingExa

朱雀/ 2024年12月04日 23:33/ 0 赞/ 25 阅读

相关初级开发者：Java异常处理示例

在Java编程中，异常处理是一种机制，用于在程序执行过程中遇到错误或意外情况时，能优雅地捕获、处理和恢复系统状态。以下是一个简单的Java异常处理示例： ```java

浅浅的花香味﹌/ 2024年10月23日 03:30/ 0 赞/ 53 阅读

相关 Canvas制作喷泉效果示例

Canvas能制作出很多动画效果，下面是一个制作喷泉效果的示例效果图 ![在这里插入图片描述][2011ff4dfa2143488a343feef5815abd.gi

ゝ一纸荒年。/ 2024年02月20日 12:37/ 0 赞/ 73 阅读

相关 canvas生成电波波形示例

测试时候，用鼠标拖动滑块，向左滑动，可降低振幅，向右没滑块，则加大振幅，波形变化的速度在代码中可调节。测试请注意，要想完美看到本效果，需要你的浏览器支持HTML5 WebGL，

冷不防/ 2024年02月20日 12:30/ 0 赞/ 65 阅读

相关 Canvas模拟火焰燃烧效果示例

canvas能做好很多事情，能显示各种动画。这里是模拟火焰燃烧效果的示例。示例效果 ![在这里插入图片描述][34af978344d243d7b35930b467c0

川长思鸟来/ 2024年02月20日 12:30/ 0 赞/ 74 阅读

相关初级Makefile实战示例

1．首先准备个main.c、fun.c程序 //main.c include<stdio.h> void main() {

素颜马尾好姑娘i/ 2022年08月19日 14:24/ 0 赞/ 185 阅读

相关 canvas初级示例

<!DOCTYPE HTML> <html> <meta http-equiv="Content-Type" content="tex

系统管理员/ 2022年08月02日 06:11/ 0 赞/ 227 阅读

相关 Java初级编程示例：日历小程序

Java日历小程序 import java.time.; public class test1 { public s

青旅半醒/ 2022年06月18日 04:19/ 0 赞/ 206 阅读

相关 ajax初级示例（下拉列表联动）

下拉列表联动效果如下动图： ![20190220175059790.gif][] 数据库表字段的信息 ![20190220173040565.png][]![2019

朱雀/ 2022年03月18日 11:17/ 0 赞/ 303 阅读

相关 canvas实现弹球的代码示例

canvas实现弹球的代码示例效果代码

小灰灰/ 2020年06月10日 13:17/ 0 赞/ 849 阅读