程序博客网 > hifiman supermini知乎

HTML5之Canvas画正方形

来源：互联网发布：hifiman supermini知乎编辑：程序博客网时间：2024/05/17 08:05

HTML5之Canvas画正方形

1、设计源码

<!DOCTYPE html><head><meta charset="utf-8" /><title>HTML5之Canvas画正方形</title><script type="text/javascript">    function drawFour(id){//获取canvas元素var canvas = document.getElementById("canvas");if(canvas == null)   return false;//获取上下文var context = canvas.getContext('2d');//设定填充图形的样式context.fillStyle = "#EEEEFF";//绘制图形context.fillRect(0,0,800,800);context.fillStyle = "yellow";//设定图形边框的样式context.strokeStyle = "blue";//指定线宽context.lineWidth = 150;context.fillRect(50,50,500,500);context.strokeRect(50,50,500,500);}</script></head><body onLoad="drawFour('canvas')">   <canvas id="canvas" width="1200" height="560"/></body>

2、设计结果

3、分析说明

（1）获取Canvas元素

var canvas = document.getElementById("canvas");

（2）取到上下文

var context = canvas.getContext('2d');

（3）填充绘制边框

context.fillStyle = "#EEEEFF";//填充的样式

（4）设定绘图样式

strokeStyle：图形边框的样式

（5）指定线宽

context.lineWidth = 150;

（6）指定颜色值

（7）绘制正方形

context.fillRect(50,50,500,500);
context.strokeRect(50,50,500,500);

1 0

hifiman supermini知乎

hifiman supermini知乎

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子 13辊校平机不锈钢板校平机校平机参数中国地质大学校庆日中国海洋大学校庆日校庆诗词校贷那些年校贷风流事校贷肉尝吴月我做校贷那些年免费阅读吴月我的校贷那些年校悦贷启悦贷款教招网考招网校园招聘网站校霸小甜心褚易叶笙增删卜易校评校服厂服装厂生产一批校服校服制衣厂中国校服网校服控吧深圳校服吧校服妹子校服专卖店深圳校服图片夏装校服图片校服裤配什么鞋子校服裤配什么上衣深圳校服裤深圳校裤校服裤蓝色校服裤校服裤怎么穿好看迷彩服裤西装裤面料西服裤配什么鞋子搭配校服的鞋子校服裤子配什么鞋校条祭